原生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验证表单大全
Nov 25 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript内置对象操作详解
Feb 04 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
简单实现jquery焦点图
Dec 12 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
JS实现放烟花效果
Mar 10 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
java必学必会之static关键字
2015/12/03 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中的匿名函数使用简介
2015/04/27 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
vscode调试django项目的方法
2020/08/06 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
党校培训思想汇报
2014/01/03 职场文书
销售总监岗位职责
2014/01/04 职场文书
单位消防安全制度
2014/01/12 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
青春励志演讲稿
2014/04/29 职场文书
最常使用的求职信
2014/05/25 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript