网页下雪效果实现

之前在掘金上看到过用 canvas 实现下雪效果,在网页上加一层固定定位的浮层,把 canvas 背景设为透明,然后绘制图案。

今天在博客园看到一个用DOM操作实现的下雪效果,动画效果是使用 setInterval 不断刷新实现的,后期可以改为 requestAnimationFrame 实现,另外这段代码依赖 jQuery ,然而 jQuery 也只是用来操作 DOM 元素,后期可以改用原生 JS 实现。

闲话不多说,直接上代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div id="app">div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
  <script>
    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('
').css({ 'position': 'absolute', 'z-index': '9999', 'top': '-50px', 'font-family': 'PingFang SC,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif' }).html('❄'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize: 5, maxSize: 25, newOn: 500, flakeColor: getRandomColor() /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */ }, options = $.extend({}, defaults, options); var interval = setInterval(function () { var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: getRandomColor() }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 }, durationFall, 'linear', function () { $(this).remove() }); }, options.newOn); }; })(jQuery); $(function () { $.fn.snow({ minSize: 5, /* 定义雪花最小尺寸 */ maxSize: 50,/* 定义雪花最大尺寸 */ newOn: 200 /* 定义密集程度,数字越小越密集 */ }); }); var getRandomColor = function () { return '#' + Math.floor(Math.random() * 16777215).toString(16); } script> body> html>

你可能感兴趣的:(Javascript)