Learn to build an eye-catching hoverboard effect for your website using HTML, CSS, and JavaScript. Elevate user engagement today!
Table of Contents
In this blog post, we will explore the exciting world of creating a captivating hoverboard effect using HTML, CSS, and JavaScript. This mesmerizing animation not only adds a dash of interactivity to your website but also creates a visually appealing user experience that can leave a lasting impression.
Throughout this tutorial, we will guide you through each step, from setting up the essential HTML structure to adding vibrant colors and smooth animations to your hoverboard. By the end of this journey, you'll have the skills to craft a dynamic and engaging feature for your website, enhancing user engagement and making your site stand out from the rest. So, let's dive into the realm of web development and turn your creative ideas into reality!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our hoverboard.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
1. <!DOCTYPE html>: This is the document type declaration, specifying that the document is written in HTML5.
2. <html lang="en">: This is the opening tag for the HTML document. It defines the root element of the document, and the lang attribute is set to "en" to indicate that the document is in English.
3. <head>: This is the head section of the HTML document. It contains meta-information and links to external resources that are not directly visible on the web page.
- <meta charset="UTF-8" />: This meta tag specifies the character encoding used in the document, which is UTF-8. UTF-8 is a widely used character encoding that supports a wide range of characters from different languages.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag is often used for responsive web design. It sets the viewport width to the device width and sets the initial zoom level to 1.0. This helps ensure that the web page adapts well to various screen sizes and devices.
- <link rel="stylesheet" href="styles.css" />: This is a link to an external CSS (Cascading Style Sheets) file named "styles.css." It's used to apply styles to the HTML elements on the web page. By linking to an external CSS file, you can separate the styling from the HTML content, making it easier to maintain and update the design of the webpage.
- <title>Hoverboard</title>: This sets the title of the web page, which is typically displayed in the browser's title bar or tab. In this case, the title is "Hoverboard."
4. <body>: This is the body section of the HTML document. It contains the visible content of the web page that users will see and interact with.
- <div class="container" id="container"></div>: This line creates a <div> element with the class attribute set to "container" and the id attribute set to "container." This is an empty container that can be used to hold content or elements on the webpage. The class and id attributes can be used for styling or JavaScript interactions.
- <script src="script.js"></script>: This line includes an external JavaScript file named "script.js" in the document. JavaScript is a programming language used to add interactivity and dynamic behavior to web pages. By including this script, you can execute custom code to manipulate the HTML and create interactive features on the webpage.
This is the basic structure of our hoverboard using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the hoverboard is in place, the next step is to add styling to the hoverboard using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our hoverboard effect.
1. * { box-sizing: border-box; }:
- The asterisk (*) is a universal selector that targets all elements on the webpage.
- box-sizing: border-box; is a CSS property that tells the browser how to calculate the total width and height of an element. When set to "border-box," it includes the element's padding and border within its specified width and height, rather than adding them to the dimensions.
2. body { ... }:
- This block of CSS rules targets the <body> element of the HTML document.
- background-color: #111; sets the background color of the entire webpage to a dark grayish color (#111).
- display: flex; makes the body element a flex container, allowing its children to be flex items.
- align-items: center; and justify-content: center; center the content both vertically and horizontally within the body.
- height: 100vh; sets the height of the body to occupy 100% of the viewport height (vh).
- overflow: hidden; hides any content that overflows the body element.
- margin: 0; removes any default margins around the body.
3. .container { ... }:
- This block of CSS rules targets elements with the class "container."
- display: flex; makes the container a flex container.
- align-items: center; and justify-content: center; center the content (in this case, squares) within the container both vertically and horizontally.
- flex-wrap: wrap; allows flex items to wrap to the next line if they don't fit horizontally.
- max-width: 500px; sets a maximum width for the container, ensuring it doesn't expand indefinitely.
4. .square { ... }:
- This block of CSS rules targets elements with the class "square" (presumably, square-shaped elements).
- background-color: #1d1d1d; sets the background color of these square elements to a dark gray color (#1d1d1d).
- box-shadow: 0 0 2px #000; adds a subtle black box shadow to each square, giving it a slight visual depth.
- height: 16px; and width: 16px; specify the height and width of each square as 16 pixels.
- margin: 2px; adds a 2-pixel margin around each square to create spacing.
- transition: 2s ease; applies a transition effect with a duration of 2 seconds and an easing function, which smooths the transition between different states.
5. .square:hover { ... }:
- This block of CSS rules targets square elements when they are hovered over with the mouse cursor.
- transition-duration: 0s; sets the transition duration to 0 seconds, effectively removing the transition effect when a square is hovered. This means the color change or any other property change will happen instantly when a square is hovered.
This will give our hoverboard an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
* {
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: 500px;
}
.square {
background-color: #1d1d1d;
box-shadow: 0 0 2px #000;
height: 16px;
width: 16px;
margin: 2px;
transition: 2s ease;
}
.square:hover {
transition-duration: 0s;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. This JavaScript code creates a web page with a container and 500 squares inside it, each with interactive behavior. When you hover over a square, it changes color, and when you move the mouse away from it, it returns to its original color. Here's a step-by-step explanation of the code:
1. const container = document.getElementById('container'): This line retrieves a reference to an HTML element with the id "container" and stores it in the container variable. This container will hold all the squares.
2. const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']: An array named colors is defined, containing five different color values represented as hexadecimal color codes.
3. const SQUARES = 500: A constant named SQUARES is defined with a value of 500, indicating the number of squares to be created.
4. The code then enters a loop that runs 500 times:
- const square = document.createElement('div'): In each iteration, a new <div> element is created and stored in the square variable.
- square.classList.add('square'): The 'square' class is added to the newly created div element. This class is used to style the squares.
- square.addEventListener('mouseover', () => setColor(square)): An event listener is added to the square. When the mouse pointer is over the square, it triggers the setColor function, which changes the square's background color and adds a shadow effect.
- square.addEventListener('mouseout', () => removeColor(square)): Another event listener is added to the square. When the mouse pointer moves out of the square, it triggers the removeColor function, which restores the square's original background color and shadow effect.
- container.appendChild(square): The newly created square is appended as a child to the container element.
5. function setColor(element) { ... }: This function sets a random background color and a box shadow with a random color for the given element. It uses the getRandomColor function to select a random color from the colors array.
6. function removeColor(element) { ... }: This function removes the custom background color and box shadow applied to the given element and restores them to their default values.
7. function getRandomColor() { ... }: This function returns a random color from the colors array by generating a random index and selecting the corresponding color.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
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)]
}Final Output:
Conclusion:
In conclusion, creating a hoverboard effect using HTML, CSS, and JavaScript is a fantastic way to enhance user engagement on your website. By following this tutorial, you've learned how to:
- Set up the HTML structure.
- Generate a grid of squares with JavaScript.
- Apply captivating colors and animations.
Now, it's time to put your newfound skills to use and create an interactive and visually stunning hoverboard for your website. Experiment, have fun, and watch your user engagement soar!
Stay tuned for more web development tutorials and creative ideas. Happy coding!
Credit: Brad Traversy
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
