为你的网站添加点击散开特效

博主：呆呆
发布时间：2021 年 06 月 13 日
1191 次浏览
暂无评论
4520字数
分类：代码分享 JS

```js-templates
<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 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>
```mejs@3.0.1/lib/anime.min.js"></script>
```

最后修改：2023 年 08 月 23 日

本文作者：呆呆
文章标题：为你的网站添加点击散开特效
本文地址：https://www.shoquan.xyz/archives/3.html
版权说明：若无注明，本文皆呆呆博客原创，转载请保留文章出处。

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 * （请使用真实邮箱地址，方便及时接收评论回复！）

打卡

私密评论

名称 *

🎲

邮箱 *

地址

为你的网站添加点击散开特效

呆呆 • 2021 年 06 月 13 日

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

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

为你的网站添加点击散开特效

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款