在图片上添加漂亮的泡泡canvas特效(由下而上)
侧边栏壁纸
  • 累计撰写 19 篇文章
  • 累计收到 0 条评论

在图片上添加漂亮的泡泡canvas特效(由下而上)

nohapa
2020-10-30 / 0 评论 / 662 阅读 / 正在检测是否收录...
泡泡特效代码

由下而上,非常漂亮。结合canvas和jquery来绘制该特效。

已在xx网站首页添加了泡泡特效,如下gif

paopao

代码分享
.site-brand-wrapper {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="zh-cn">
<body>
<div id="header-description" class="site-brand-wrapper" style="background-image: url("https://ws4.sinaimg.cn/large/617a9fefly1fsniq597khj21kw11xafa.jpg"); height: 300px;">
    <canvas id="paopao" class="pos-a"></canvas>
</div>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //首页泡泡特效
    $(function() {
        var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
        // Main
        initHeader();
        addListeners();
        function initHeader() {
            width = document.getElementById("header-description").offsetWidth; // 调整为自己div的宽度
            height = 300; // 调整为自己div的高度
            target = {x: 0, y: height};
            largeHeader = document.getElementById('header-description'); //改为你的div容器id
            largeHeader.style.height = height+'px';
            canvas = document.getElementById('paopao'); // 这个是canvas标签的id
            canvas.width = width;
            canvas.height = height;
            ctx = canvas.getContext('2d');
            // create particles
            circles = [];
            for(var x = 0; x < width*0.5; 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 = document.body.clientWidth; // 调整为自己div的宽度
            height = 300; //调整为自己div的高度
            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.1+Math.random()*0.3;
                _this.scale = 0.1+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,255,255,'+ _this.alpha+')';
                ctx.fill();
            };
        }
    });
</script>
0

评论 (0)

取消