晨旭的博客
你想干什么!
晨旭的博客~
banner上浮气泡效果

看网站顶上那堆往上飘的球就知道效果了→_→ 

或者看下面,就是酱紫:

https://source.papapoi.com/wp-content/plugins/new-ueditor/ueditor/php/upload/82731459865616.gif?imageView2/2/w/785/h/351|watermark/1/image/aHR0cDovL3NvdXJjZS5wYXBhcG9pLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxNi8wOC9sb2dvcGljLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10

添加方法:

先把下面的js代码引入网页(搞成js文件比较好哈):

(function() {
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
    // Main
    initHeader();
    addListeners();
    function initHeader() {
        width = window.innerWidth;
        height = document.getElementById('banner').offsetHeight;
        target = {x: 0, y: height};
        largeHeader = document.getElementById('banner');
        largeHeader.style.height = height+'px';
        canvas = document.getElementById('demo-canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');
        // create particles
        circles = [];
        for(var x = 0; x < width*0.8; x++) {
            var c = new Circle();
            circles.push(c);
        }
        animate();
    }
    // Event handling
    function addListeners() {
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }
    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }
    function resize() {
        width = window.innerWidth;
        height = document.getElementById('banner').offsetHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }
    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in circles) {
                circles[i].draw();
            }
        }
        requestAnimationFrame(animate);
    }
    // Canvas manipulation
    function Circle() {
        var _this = this;
        // constructor
        (function() {
            _this.pos = {};
            init();
            console.log(_this);
        })();
        function init() {
            _this.pos.x = Math.random()*width;
            _this.pos.y = height+Math.random()*100;
            _this.alpha = 0.3+Math.random()*0.3;
            _this.scale = 0.3+Math.random()*0.3;
            _this.velocity = Math.random();
        }
        this.draw = function() {
            if(_this.alpha <= 0) {
                init();
            }
            _this.pos.y -= _this.velocity;
            _this.alpha -= 0.0005;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(255,200,255,'+ _this.alpha+')';
            ctx.fill();
        };
    }
})();

然后,在banner的div结束前加入以下遮罩代码:

<canvas class="demo-canvas" id="demo-canvas"></canvas>

(不要吐槽id名23333)

然后就全部搞定啦~

赞赏
如非特殊说明,本站所有文章均采用知识共享 署名-非商业性使用-相同方式共享4.0国际许可协议(CC BY-NC-SA 4.0)进行许可。

发表评论

textsms
account_circle
email

  • https://secure.gravatar.com/avatar/b431bf781498d1fe47f732913dce394c?s=80&d=mm&r=x
    Google Chrome 49.0.2623.108 Google Chrome 49.0.2623.108 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.108 Safari/537.36

    简直是CPU的灾难23333

    3年前回复
  • https://secure.gravatar.com/avatar/166afae0dc7ed1e227486ebb7e3bcbce?s=80&d=mm&r=x
    Microsoft Edge 13.10586 Microsoft Edge 13.10586 Windows 10 Windows 10
    Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586

    意料之内的卡炸

    3年前回复
  • https://secure.gravatar.com/avatar/08273c5e13f4e04780815547040b4d95?s=80&d=mm&r=x
    老王
    UC Browser 5.6.12150.8 UC Browser 5.6.12150.8 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 UBrowser/5.6.12150.8 Safari/537.36

    次一点的服务器估计就跑满了

    3年前回复
    • https://secure.gravatar.com/avatar/b431bf781498d1fe47f732913dce394c?s=80&d=mm&r=x
      晨旭博主
      Google Chrome 50.0.2661.94 Google Chrome 50.0.2661.94 Windows 7 x64 Edition Windows 7 x64 Edition
      Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

      没看懂诶w

      3年前回复
  • https://secure.gravatar.com/avatar/07e738665691e896f56eb3392f399274?s=80&d=mm&r=x
    Nice
    Google Chrome 53.0.2785.116 Google Chrome 53.0.2785.116 Windows 7 x64 Edition Windows 7 x64 Edition
    Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

    谢谢分享!!!

    2年前回复

晨旭的博客~

banner上浮气泡效果
看网站顶上那堆往上飘的球就知道效果了→_→ 或者看下面,就是酱紫:添加方法:先把下面的js代码引入网页(搞成js文件比较好哈):(function() {     var&n…
扫描二维码继续阅读
2016-04-05