HoverBoard Effect Using HTML CSS & JS

2
125

Hey, learner today In this blog post, We will be Creating a HoverBoard Effect Using HTML CSS & JS. In the past post, we have created many projects one of them Responsive Mobile Tab Navigation Bar Using HTML CSS & JS. Now it is time to create a Responsive Mobile Tab Navigation Bar.

HoverBoard Effect Using HTML CSS & JS

A hoverboard effect is a web-based project. The hoverboard effect project has a cool effect of painting on a box by hovering over it. It is created by using HTML5, JavaScript, and CSS3.

In this project, we create a big square board with lots of tiny square boxes on it. We have colored those small square boxes If the mouse cursor goes over the big square box the small tiny square box is colored. It has a simple background big box in the middle. The user has to hover the mouse over the box and it will display a random color. It has a very cool user interface. the project make the website more attractive.

Preview of HoverBoard Effect on Codepen

Codepen Link

You might like this

HoverBoard Effect Using HTML CSS and JS [Source code]

To create a HoverBoard Effect Using HTML CSS and JS At first, you have to create three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css at last paste the Javascript code in Script.js that’s all after pasting the code.

At first, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<!--Codingthai.com--> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Hoverboard</title>
  </head>
  <body>
    <div class="container" id="container"></div>
    <script src="script.js"></script>
  </body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

* {
  box-sizing: border-box;
}

body {
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 400px;
}

.square {
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  height: 16px;
  width: 16px;
  margin: 2px;
  transition: 2s ease;
}

.square:hover {
  transition-duration: 0s;
}

At last, you have to create a Javascript file with the named script.js and paste the Js code on it and save it again don’t forget to give the .js extension to the Javascript file.

const container = document.getElementById('container')
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
const SQUARES = 500

for(let i = 0; i < SQUARES; i++) {
    const square = document.createElement('div')
    square.classList.add('square')

    square.addEventListener('mouseover', () => setColor(square))

    square.addEventListener('mouseout', () => removeColor(square))

    container.appendChild(square)
}

function setColor(element) {
   const color = getRandomColor()
   element.style.background = color
   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element) {
   element.style.background = '#1d1d1d'
   element.style.boxShadow = '0 0 2px #000'
}

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
}

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment down or contact me

Previous articleResponsive Mobile Tab Navigation Bar Using HTML CSS & JS
Next articleImage Carousel Using HTML CSS & JS

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here