目录

实现一个红包雨的效果

目录

在很多活动页面我们经常会看到这种效果,屏幕上下着红包雨,点开有有各种礼品或者是优惠券什么的。之前项目要求做一个这样的效果,于是尝试着写了下

1.首先要明白这个思路,每个红包下落的位置以及从开始出现到消失的时间都各不相同。那么也就是说我们可以写两个函数随机生成红包出现的位置以及设置下落的时间

2.其次,点击红包后肯定会有一系列的操作,在这个过程中应该将其他红包元素的点击事件去除,以免多次点击,达不到我们想要的效果

3.关于下落的效果,这里是用的css的动画。还有个地方需要注意,因为下落的过程中红包是不停的旋转的,所以得将该元素的animation-iteration-count属性设置为infinite,表示一直重复该动画

4.这里的红包元素是一开始使用for循环依次创建的,对于一些性能要求很高的页面来说不是那么的友好,可以选择其它的方式优化一下。

5.下面是一个简单的demo

html部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    
    <body>
        <div id="envelope-box"></div>
        <script src="./index.js"></script>
    </body>
    
    </html>

css部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    #envelope-box {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
    }
    
    #envelope-box>div {
        position: absolute;
        border-radius: 5px;
        width: 80px;
        height: 100px;
        background: url('./img/petal.png') no-repeat;
        background-size: contain;
        animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
        z-index: 1001;
    }
    
    #envelope-box>div:hover {
        cursor: pointer;
    }
    
    .red-envelope {
        transition: transform .3s;
    }
    
    .red-envelope.active {
        transform: scale(1.5, 1.5);
    }
    
    @keyframes rotary {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }

js部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    const readEnvelope = {
        NUMBER_OF_LEAVES: 20,
        wWidth: $(window).width(),
        wHight: $(window).height(),
        $container: $('#envelope-box'),
        init: function () {
            const self = this;
            for (let i = 0; i < self.NUMBER_OF_LEAVES; i++) {
                self.$container.append(self.createWedding());
            }
        },
        // 创建红包元素
        createWedding: function () {
            const self = this;
            let ele = $('<div class="red-envelope"></div>');
            ele.css({
                top: self.pixelValue(self.randomInteger(-200, -100)),
                left: self.pixelValue(self.randomInteger(0, self.wWidth - 100)),
                'animationName': 'rotary',
                'animationDuration': self.durationValue(self.randomFloat(2, 8)),
                'animation-iteration-count': 'infinite'
            }).animate({
                'top': self.wHight + 60
            }, self.randomFloat(1.2, 8.2) * 1000, 'linear', function () {
                $(this).remove();
            }).hover(function () {
                $(this).stop();
                $(this).css('animation', 'none');
                $(this).css('z-index', '1002');
                $(this).addClass('active');
            }).mouseout(function () {
                $(this).fadeOut();
                $(this).removeClass('active');
                setTimeout(function () {
                    $(this).remove();
                }, 2000);
            }).on('click', function () {
                $(this).fadeOut();
                setTimeout(function () {
                    $(this).remove();
                }, 2000);
                $('.red-envelope').unbind('click');
            });
            return ele;
        },
        // 设置红包生成位置
        randomInteger: function (low, high) {
            return low + Math.floor(Math.random() * (high - low));
        },
        // 设置每个红包下降的秒数
        randomFloat: function (low, high) {
            return low + Math.random() * (high - low);
        },
        // 添加px符号
        pixelValue: function (value) {
            return value + 'px';
        },
        // 添加时间单位
        durationValue: function (value) {
            return value + 's';
        },
    };
    readEnvelope.init();

6.以上是一个小demo,以后有时间再想想其他更好的方式。