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>Reveal Image Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"></div>
<script>
let container = document.querySelector('.container');
let count = 1000;
for(let i=0;i<count;i++){
let box = document.createElement('div');
box.className="box";
container.appendChild(box);
}
let boxes = document.querySelectorAll('.box');
for(let i=0;i<boxes.length;i++){
boxes[i].addEventListener('mouseover', (e) =>{
boxes[i].classList.add('active');
boxes[i].style.setProperty('--x',getRandomValue());
boxes[i].style.setProperty('--y',getRandomValue());
function getRandomValue(){
return `${Math.random() * 2000 - 1000}px`;
}
let angleValue = Math.random() * 360;
boxes[i].style.filter = 'hue-rotate('+angleValue+'deg)';
});
}
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
overflow: hidden;
background: url(bg1.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container
{
position: absolute;
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container .box
{
position: relative;
top: 0;
width: 3.33vw;
height: 3.33vw;
background: url(bg2.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
border: 1px solid #000;
box-sizing: border-box;
}
.container .box.active
{
background: #ff0;
z-index: 1;
pointer-events: none;
animation: animate 1s linear forwards;
}
@keyframes animate
{
0%
{
opacity: 1;
transform: translate(0px,0px) rotate(0deg);
}
100%
{
opacity: 0;
transform: translate(var(--x),var(--y)) rotate(720deg);
}
}
