网站点击散开特效

给你的网站添加鼠标点击散开特效

效果

代码

将代码添加在您网站的 html 页面的 body 标签中任意位置即可

canvas id="fireworks" style="position: fixed;
     left: 0px;
     top: 0px;
     pointer-events: none;
     z-index: 2147483647;
     width: 1920px;
     height: 151px;
    " width="3840" height="302">
    /canvas>
    
script type="text/javascript" src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js">
    /script>
    
script type="text/javascript">

    function updateCoords(e) {

        pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left,
            pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
    }


    function setParticuleDirection(e) {
    
        var t = anime.random(0, 360) * Math.PI / 180,
            a = anime.random(50, 180),
            n = [-1, 1][anime.random(0, 1)] * a;

        return {

            x: e.x + n * Math.cos(t),
            y: e.y + n * Math.sin(t)
        }

    }


    function createParticule(e, t) {

        var a = {
}
    ;

        return a.x = e,
            a.y = t,
            a.color = colors[anime.random(0, colors.length - 1)],
            a.radius = anime.random(16, 32),
            a.endPos = setParticuleDirection(a),
            a.draw = function() {

                ctx.beginPath(),
                    ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
                    ctx.fillStyle = a.color,
                    ctx.fill()
            }
,
            a
    }


    function createCircle(e, t) {

        var a = {
}
    ;

        return a.x = e,
            a.y = t,
            a.color = "#F00",
            a.radius = .1,
            a.alpha = .5,
            a.lineWidth = 6,
            a.draw = function() {

                ctx.globalAlpha = a.alpha,
                    ctx.beginPath(),
                    ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0),
                    ctx.lineWidth = a.lineWidth,
                    ctx.strokeStyle = a.color,
                    ctx.stroke(),
                    ctx.globalAlpha = 1
            }
,
            a
    }


    function renderParticule(e) {
    
        for (var t = 0;
     t  e.animatables.length;
 t++)
            e.animatables[t].target.draw()
    }


    function animateParticules(e, t) {
    
        for (var a = createCircle(e, t), n = [], i = 0;
     i  numberOfParticules;
     i++)
            n.push(createParticule(e, t));

        anime.timeline().add({

            targets: n,
            x: function(e) {

                return e.endPos.x
            }
,
            y: function(e) {

                return e.endPos.y
            }
,
            radius: .1,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule
        }
).add({

            targets: a,
            radius: anime.random(80, 160),
            lineWidth: 0,
            alpha: {

                value: 0,
                easing: "linear",
                duration: anime.random(600, 800)
            }
,
            duration: anime.random(1200, 1800),
            easing: "easeOutExpo",
            update: renderParticule,
            offset: 0
        }
)
    }


    function debounce(fn, delay) {

        var timer
        return function() {

            var context = this
            var args = arguments
            clearTimeout(timer)
            timer = setTimeout(function() {

                fn.apply(context, args)
            }
, delay)
        }

    }
    

    var canvasEl = document.querySelector("#fireworks");

    if (canvasEl) {

        var ctx = canvasEl.getContext("2d"),
            numberOfParticules = 30,
            pointerX = 0,
            pointerY = 0,
            tap = "mousedown",
            colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"],
            setCanvasSize = debounce(function() {

                canvasEl.width = 2 * window.innerWidth,
                    canvasEl.height = 2 * window.innerHeight,
                    canvasEl.style.width = window.innerWidth + "px",
                    canvasEl.style.height = window.innerHeight + "px",
                    canvasEl.getContext("2d").scale(2, 2)
            }
, 500),
            render = anime({

                duration: 1 / 0,
                update: function() {

                    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
                }

            }
    );

        document.addEventListener(tap, function(e) {
    
                "sidebar" !== e.target.id &
    &
     "toggle-sidebar" !== e.target.id &
    &
     "A" !== e.target.nodeName &
    &
     "IMG" !== e.target.nodeName &
    &
 (render.play(),
                    updateCoords(e),
                    animateParticules(pointerX, pointerY))
            }
, !1),
            setCanvasSize(),

            window.addEventListener("resize", setCanvasSize, !1)
    }
    
/script>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！