nosum-blog-sakura/public/js/fireworks.js

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)
    }
}

function isMobileBrowser() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        return true;
    } else
        return false;
}

var canvasEl = document.querySelector("#fireworks");
if (canvasEl && !isMobileBrowser()) {
    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)
}