All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Awesome Javascript Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box" style="--img:url(img1.jpg);"></div>
<div class="box" style="--img:url(img2.jpg);"></div>
<div class="box" style="--img:url(img3.jpg);"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
let boxes = document.querySelectorAll('.box');
boxes.forEach(function(box){
let spans = [];
for (let i = 0; i < 200; i++){
let span = document.createElement('span');
spans.push(span);
box.appendChild(span);
span.style.top = `${i * 1.5}px`;
span.style.backgroundPositionY = `${i * -1.5}px`;
span.style.transitionDelay = (Math.random() * 1.5) + 0 + 's';
}
box.addEventListener('click', function(){
box.classList.toggle('active');
spans.forEach(function(span){
span.style.setProperty('--x',Math.floor(Math.random() * 400 - 200) + 'px');
span.style.setProperty('--r',Math.floor(Math.random() * 360 - 0) + 'deg');
})
})
})
})
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #363a3b;
overflow: hidden;
}
.container
{
position: relative;
display: flex;
gap: 50px;
}
.container .box
{
position: relative;
width: 300px;
height: 300px;
cursor: pointer;
}
.container .box span
{
position: absolute;
width: 300px;
height: 2px;
background: var(--img);
background-size: 300px;
pointer-events: none;
transition: 0.5s ease-in-out;
}
.container .box.active span
{
transform: translateX(var(--x)) rotate(var(--r));
}
