source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS JS Effects</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h2>Awesome</h2>
</section>
<script>
let section = document.querySelector('section');
for (let i = 0; i < 600; i++){
let div = document.createElement('div');
section.appendChild(div);
}
document.addEventListener('mousemove', function(e){
document.querySelectorAll('div').forEach(div => {
let x = (div.offsetLeft) - e.pageX;
let y = (div.offsetTop) - e.pageY;
let dist = Math.sqrt(x * x + y * y);
let score = Math.exp(dist * -0.01);
div.style.transform = "scale(" + score * 4 +")"
})
})
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section
{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #111;
display: flex;
flex-wrap: wrap;
}
section div
{
position: relative;
width: 50px;
height: 50px;
background: #fff;
transform: scale(0);
rotate: 45deg;
/* border-radius: 50%;*/
}
h2
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: consolas;
font-size: 10em;
z-index: 10000;
color: #fff;
mix-blend-mode: difference;
cursor: default;
}
