Kod HTML
<div id="container"></div>
Kod CSS
body {
background-image : url(https://images.unsplash.com/photo-1551582045-6ec9c11d8697?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1901&q=80);
background-size : cover;
background-position : center center;
overflow : hidden;
margin: 0;
padding: 0;
width: 100%;
height : 100vh;
position: relative;
}
#container {
position: absolute;
top: 0;
left: -10%;
right: 0;
width: 110vw;
height: 110vh;
z-index: 1;
.droplet {
position: absolute;
top: -20%;
background : #fff;
border-radius: 50%;
}
}
Kod JS
const randomInRange = (max, min) =>
Math.floor(Math.random() * (max - min)) + min
const arry = new Array(200).fill();
arry.forEach(()=>{
var pos = randomInRange(100.5, 0)
var delay = randomInRange(10, 0);
var speed = randomInRange(17, 12);
var height = randomInRange(12, 4);
var blurVal = randomInRange(4, 1);
const path = () => {
const min = -150,
max = 150;
return [
{ x: randomInRange(max, min), y: randomInRange(max, min) },
{ x: randomInRange(max, min), y: randomInRange(max, min) },
{ x: randomInRange(max, min), y: randomInRange(max, min) },
{ x: randomInRange(max, min), y: randomInRange(max, min) }
];
};
droplet = document.createElement("div");
droplet.className = "droplet";
droplet.style.left = pos + "%";
droplet.style.height = droplet.style.width = height +"px";
TweenMax.set(droplet,{opacity:randomInRange(0.8, 0.5)});
TweenMax.to(droplet, speed, {
y: 1520,
delay: delay,
top: -300,
filter: `blur(${blurVal}px)`,
repeat: -1,
bezier: {
type: "soft",
values:path(),
autoRotate: true
},
ease: Power1.easeInOut
});
document.getElementById("container").appendChild(droplet);
})
Komentarze