1): Animejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aout us</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
width:100%;
background:red;
color:#ffffff;
align-items: center;
justify-content: center;
display: flex;
font-family: sans-serif;
font-size:4rem;
text-transform: uppercase;
letter-spacing: 10px;
}
.blocks{
position: absolute;
width:50px;
height: 100px;
background:#e80202;
box-shadow: 10px 10px 50px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<div class="container">
<h2><span>Deepak</span></h2>
</div>
https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.js
<script type="text/javascript" src="anime.js"></script>
<script type="text/javascript">
const container = document.querySelector('.container')
for (var i=0;i<=100;i++) {
const blocks = document.createElement('div');
blocks.classList.add('blocks');
container.appendChild(blocks);
}
function animateBlocks(){
anime({
targets:'.blocks',
translateX:function(){
return anime.random(-700,700);
},
translateY:function(){
return anime.random(-500,500);
},
scale:function(){
return anime.random(0.2,0.4);
},
easing:'linear',
duration:3000,
delay:anime.stagger(10),
complete:animateBlocks,
})
}
animateBlocks()
</script>
</body>
</html>
0 Comments