原生JS实现的雪花飘落动画效果


Posted in Javascript onMay 03, 2018

本文实例讲述了原生JS实现的雪花飘落动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>3water.com 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>
<div class="masthead"></div>
<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>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

原生JS实现的雪花飘落动画效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js生成验证码并直接在前端判断
May 15 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 #Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 #Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 #Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 #Javascript
Angular学习教程之RouterLink花式跳转
May 03 #Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 #Javascript
Vue表单类的父子组件数据传递示例
May 03 #Javascript
You might like
php操作JSON格式数据的实现代码
2011/12/24 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
三星英国官网:Samsung英国
2018/09/25 全球购物
个人简历自荐信
2013/12/05 职场文书
内容编辑个人求职信
2013/12/10 职场文书
总经理司机职责
2014/02/02 职场文书
平安建设工作方案
2014/06/02 职场文书
物业管理专业求职信
2014/06/11 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
安全伴我行主题班会
2015/08/13 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
总结Python连接CS2000的详细步骤
2021/06/23 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang