自己实现的粒子效果

参考网址：https://codepen.io/natewiley/pen/GJVOVw?depth=everything&order=popularity&page=2&q=Particle+Animation&show_forks=false
使用了 TweenMax 动画库

源码

效果图

15.gif

具体的在公司页面上的实现

1. PC 端

公司实现页面 PC 端 => 顶部 banner 效果

• 源码

banTopAnimate();
    //顶部 ban 粒子效果
    function banTopAnimate() {
        var $con = $("#ban__animate"),
        w = $con.width(),
        h = $con.height();
        //添加 div 
        for (var i = 0; i < 50; i++) {
            $("
").appendTo($con);
            // console.log($(".wrap").find('div').length);
        }
        // console.log($(".wrap"));
        function random(min, max) {
            return (Math.random() * (max - min)) + min;
        }

        $con.find(".animate__list").each(function (i) {

            var x = random(0, w),
                y = random(0, h),
                z = random(-1000, -200),
                color = "#fff";
            size = random(1, 10),
                c = $(this);

            c.css({
                background: color,
                height: size,
                width: size,
                borderRadius: "50%",
                boxShadow: "0 0 " + size + "px " + color
            })
            //dom 速度 {初始时的样式} {结束时的样式}
            TweenMax.fromTo(c, 10, {
                opacity: 0,
                x: x,
                y: y,
                z: z
            }, {
                opacity: 1,
                z: 200,
                repeat: -1,//是否重复执行
                // delay: i * -.015
                delay: i * -.3//延迟时间
            });
        });
    }

• 效果图

26.gif

2. 手机端

公司实现页面 手机端 => 顶部 banner 效果

• 源码

//顶部 .main1 动画
    this.mainTopAnimate = function () {
        var _me = this;
        var $con = $("#ban__animate"),
        w = $con.width(),
        h = $con.height();
        //添加 div 
        for (var i = 0; i < 50; i++) {
            $("
").appendTo($con);
            // console.log($(".wrap").find('div').length);
        }
        // console.log($(".wrap"));
        function random(min, max) {
            return (Math.random() * (max - min)) + min;
        }

        $con.find(".animate__list").each(function (i) {

            var x = random(0, w),
                y = random(0, h),
                z = random(-1000, -200),
                color = "#fff";
            size = random(1, 4),
                c = $(this);

            c.css({
                background: color,
                height: size,
                width: size,
                borderRadius: "50%",
                boxShadow: "0 0 " + size + "px " + color
            })
            //dom 速度 {初始时的样式} {结束时的样式}
            TweenMax.fromTo(c, 10, {
                opacity: 0,
                x: x,
                y: y,
                z: z
            }, {
                opacity: 1,
                z: 200,
                repeat: -1,//是否重复执行
                // delay: i * -.015
                delay: i * -.3//延迟时间
            });
        });

        return _me;
    };

• 效果图

22.gif