Hướng dẫn tạo hiệu ứng tuyết rơi
1. Tạo thẻ html canvas
<canvas id="canvas" />
Xem Thêm : Chia sẻ giao diện shop bán đồ trẻ em nukeviet
2. Thêm 1 chút Css
body {
margin: 0;
padding: 0;
}
embed {
display: none;
}
canvas {
background-color:black;
background-repeat: no-repeat;
background-size: cover;
}
3. Tiến hành hiển thị hiệu ứng tuyết rơi
const canvas = document.querySelector('#canvas');
const c = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
function snow() {
this.radius = Math.random() * 2;
this.x = Math.floor(Math.random() * canvas.width);
this.y = -this.radius;
this.color = '#FFF';
this.speed = {
x: Math.random() * 4 - 2,
y: Math.random() * 3 + 2,
};
}
snow.prototype.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
c.shadowColor = this.color;
c.shadowBlur = 5;
c.fillStyle = this.color;
c.fill();
c.closePath();
}
snow.prototype.update = function() {
this.x += this.speed.x;
this.y += this.speed.y;
if (this.y >= canvas.height) {
this.speed.y = 0;
}
this.draw();
}
const arr = [];
function init() {
arr.push(new snow());
}
function animate() {
c.clearRect(0,0, canvas.width, canvas.height);
arr.forEach(function(item) {
item.update();
})
if (arr.length > 1000) {
arr.splice(0,1);
}
init();
window.requestAnimationFrame(animate);
}
animate();
Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.
Nguồn: https://vncode.info
Danh mục: Thủ Thuật Chia Sẻ Hay