Skip to content

Commit 7963eb1

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1700 from JadavShraddha/test
Hover Board Effect Added
2 parents 9fb7032 + a6a7078 commit 7963eb1

6 files changed

Lines changed: 84 additions & 0 deletions

File tree

‎Projects/HoverBoard_Effect/HoverBoardEffect.png‎

16.1 KB
Loading

‎Projects/HoverBoard_Effect/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<h2>HoverBoard Effect</h2>
2+
<pre>This project is created by html, css and javascript.
3+
a hover effect in CSS?
4+
CSS Hover Effects: An Introduction to Hover Effects in CSS
5+
A CSS hover effect takes place when a user hovers over an element, and the element responds with transition effects.</pre>
6+
![Alt text](image.png)

‎Projects/HoverBoard_Effect/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Hoverboard</title>
8+
</head>
9+
10+
<body>
11+
<audio src="hover-sound.mp3" controls loop></audio>
12+
<div class="container" id="container"></div>
13+
<script src="script.js"></script>
14+
</body>
15+
</html>

‎Projects/HoverBoard_Effect/script.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const container = document.getElementById('container')
2+
const colors = ['#fe0303', '#1500ff', '#ff00c3', '#03bae7', '#259c15', '#0e4706', '#d4db1e', '#455a0b', '#58df3a', '#12d0ae', '#b044f8', '#e907e9', '#7b6738', '#e907a5']
3+
const SQUARES = 500
4+
5+
for(let i = 0; i < SQUARES; i++) {
6+
const square = document.createElement('div')
7+
square.classList.add('square')
8+
9+
square.addEventListener('mouseover', () => setColor(square))
10+
11+
square.addEventListener('mouseout', () => removeColor(square))
12+
13+
container.appendChild(square)
14+
}
15+
16+
function setColor(element) {
17+
const color = getRandomColor()
18+
element.style.background = color
19+
element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
20+
}
21+
22+
function removeColor(element) {
23+
element.style.background = '#1d1d1d'
24+
element.style.boxShadow = '0 0 2px #000'
25+
}
26+
27+
function getRandomColor() {
28+
return colors[Math.floor(Math.random() * colors.length)]
29+
}

‎Projects/HoverBoard_Effect/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: #111;
7+
display:flex;
8+
align-items: center;
9+
justify-content: center;
10+
height: 100vh;
11+
overflow: hidden;
12+
margin: 0;
13+
}
14+
15+
.container {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
flex-wrap: wrap;
20+
max-width: 80vh;
21+
}
22+
23+
.square {
24+
background-color: #1d1d1d;
25+
box-shadow: 0 0 2px #000;
26+
height: 16px;
27+
width: 16px;
28+
margin: 2px;
29+
transition: 1s ease;
30+
}
31+
32+
.square:hover {
33+
transition-duration: 0s;
34+
}

‎img/projects/HoverBoardEffect.png‎

16.1 KB
Loading

0 commit comments

Comments
 (0)