.gsap-ohgiri#js-ohgiri
.window
- for (i = 0; i < 300; i++)
.snow(ref="snow" + i)
View Compiled
body {
height: 100vh;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
.snow {
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 100%;
}
.window {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: drop-shadow(0 0 10px rgba(#fff, 1));
}
View Compiled
console.clear()
new Vue({
el: '#js-ohgiri',
mounted () {
for (let i = 0; i < 300; i++) {
// element
const snow = this.$refs['snow' + i]
// 基準のx値
const baseX = gsap.utils.random(-10, 110)
// 初期配置
gsap.set(snow, {
x: baseX + 'vw',
y: -10,
opacity: gsap.utils.random(0, 1),
scale: gsap.utils.random(0, 1)
})
// 縦方向
gsap.to(snow, {
duration: gsap.utils.random(10, 30),
y: '100vh',
delay: gsap.utils.random(0, -30),
repeat: -1,
ease: 'none'
})
// 横方向
gsap.to(snow, {
duration: gsap.utils.random(5, 15),
x: baseX + gsap.utils.random(-12, 12) + 'vw',
yoyo: true,
repeat: -1,
delay: gsap.utils.random(-20, -10),
ease: 'power1.inOut'
})
}
}
})
This Pen doesn't use any external CSS resources.