首页 > 其他分享> > jq制作樱花飘落特效

jq制作樱花飘落特效

2021-01-18 22:58:35 作者：互联网

jq制作樱花飘落特效

今天看到一些网站有樱花飘落，雨滴，流星，孔明灯等在整个页面飘动的特效，经过查询资料自己也做了一个，分享给大家

思路：
1.创建一个樱花的元素即为樱花图片
2.产生的樱花图片不止一个应该为随机一张图片
3.控制这个樱花的运动轨迹，即樱花开始飘落位置和结束位置也是随机的
4.设置一个定时器每个一段时间调用这个樱花飘落的函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 定义页面的高度即樱花飘落范围的高度 */
        body {
            height: 5000px;
        }

        .snowRoll {
            position: absolute;
            opacity: 1;
            height: 80px;
            animation: mysakura 30s;
        }

        /* 给樱花容器添加一边飘落一边旋转的动画 */
        @keyframes mysakura {
            to {
                transform: rotate(1080deg);
            }
        }
    </style>
</head>

<body>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
    <script>
        // 需求：让樱花从页面上方随机产生并往左下运动并旋转
        // 樱花飘落部分
        // 设置数组存储不同花瓣的图片，
        // 等一下让图片随机定时随机产生一张

        // 可以选择自己喜欢的图片 比如雨滴 孔明灯 流星等
        let sakuraUrl = [
            'images/hb1.png',
            'images/hb2.png',
            'images/hb3.png',
        ]

        //获取花瓣飘落范围的宽高
        visualWidth = $("body").width();
        visualHeight = $("body").height();

        //飘樱花 函数
        function sakuraflake() {
            // 创建一个樱花元素
            function createSakuraBox() {
                // 随机3张图0~3下标随机一张樱花图片
                let url = sakuraUrl[[Math.floor(Math.random() * 3)]];
                // 函数调用时返回这个樱花元素
                return $('<div class="snowbox" />').css({
                    // 樱花的初始样式
                    'position': 'absolute',
                    'width': 41,
                    'height': 41,
                    'backgroundSize': 'cover',
                    'zIndex': 99,
                    'top': '-10px',
                    'opacity': 1,
                    'backgroundImage': 'url(' + url + ')'
                }).addClass('snowRoll');
            }


            // 设置定时器开始掉落樱花
            setInterval(function () {
                // 控制樱花的运动的轨迹
                // 1.樱花开始的位置即left的值为随机产生
                // 2.樱花结束的位置通过计算开始的位置减去大概的值得到也是随机的
                // 3.樱花的运动时间也是通过计算飘落范围的高度大概需要多少秒得到
                // 以上数据都是可以根据自己喜欢的运动轨迹自行调整
                let startLeft = Math.random() * visualWidth,
                    endTop = visualHeight,
                    endLeft = startLeft - 4000 + Math.random() * 500,
                    duration = visualHeight * 10 + Math.random() * 5000;

                // 创建一个樱花
                let $sakura = createSakuraBox();

                // 设计樱花的起点位置
                $sakura.css({
                    left: startLeft,
                });

                // 添加樱花元素到页面中
                $('body').append($sakura);

                // 开始执行动画
                // 这里用到transition依赖jq的transit插件可自行下载
                $sakura.transition({
                    top: endTop,
                    left: endLeft,
                }, duration, 'linear', function () {
                    $(this).remove() //动画结束后删除该元素
                });

            }, 1000);
        }
        // 调用樱花飘落函数
        sakuraflake()

    </script>
</body>

</html>

效果截图

在这里插入图片描述

标签：樱花,特效,random,body,jq,随机,飘落,Math
来源： https://blog.csdn.net/weixin_39411655/article/details/112796204