This article mainly introduces the snowflake falling animation effect implemented by native JS, involving implementation techniques related to javascript numerical operations and dynamic operation of page element attributes. Friends in need can refer to it
This article describes the native JS example Realized snowflake falling animation effect. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>www.jb51.net JS下雪动画</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style> .masthead { background-color:#333; display:block; width:100%; height:400px; } </style> <body> <p class="masthead"></p> <script> (function () { var COUNT = 300; var masthead = document.querySelector('.masthead'); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var width = masthead.clientWidth; var height = masthead.clientHeight; var i = 0; var active = false; function onResize() { width = masthead.clientWidth; height = masthead.clientHeight; canvas.width = width; canvas.height = height; ctx.fillStyle = '#FFF'; var wasActive = active; active = width > 600; if (!wasActive && active) requestAnimFrame(update); } var Snowflake = function () { this.x = 0; this.y = 0; this.vy = 0; this.vx = 0; this.r = 0; this.reset(); }; Snowflake.prototype.reset = function() { this.x = Math.random() * width; this.y = Math.random() * -height; this.vy = 1 + Math.random() * 3; this.vx = 0.5 - Math.random(); this.r = 1 + Math.random() * 2; this.o = 0.5 + Math.random() * 0.5; }; canvas.style.position = 'absolute'; canvas.style.left = canvas.style.top = '0'; var snowflakes = [], snowflake; for (i = 0; i < COUNT; i++) { snowflake = new Snowflake(); snowflakes.push(snowflake); } function update() { ctx.clearRect(0, 0, width, height); if (!active) return; for (i = 0; i < COUNT; i++) { snowflake = snowflakes[i]; snowflake.y += snowflake.vy; snowflake.x += snowflake.vx; ctx.globalAlpha = snowflake.o; ctx.beginPath(); ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); if (snowflake.y > height) { snowflake.reset(); } } requestAnimFrame(update); } // shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); onResize(); window.addEventListener('resize', onResize, false); masthead.appendChild(canvas); })(); </script></body></html>
Related recommendations:
p5.js to achieve the fireworks blooming effect
js implements sliding puzzle verification effect (with code)
The above is the detailed content of Snowflake falling animation effect implemented by native JS. For more information, please follow other related articles on the PHP Chinese website!