Fireworks Animation With Anime.Js

[{"id":95,"created_at":"2023-10-08T09:32:01.704719+00:00","html":"

\n \n

\n\n

Click around

\n\n\n","css":":root {\n\tfont-size: 14px;\n}\n\n@media (min-width: 350px) {\n\t:root {\n\t\tfont-size: 16px;\n\t}\n}\n\n@media (min-width: 640px) {\n\t:root {\n\t\tfont-size: 28px;\n\t}\n}\n\n@media (min-width: 1440px) {\n\t:root {\n\t\tfont-size: 1.25vw;\n\t}\n}\n\n* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n\nsection {\n\tposition: relative;\n\tz-index: 1;\n\tmax-width: 19rem;\n}\n\n/* Logo */\n\n.logo {\n\topacity: 0;\n\tposition: relative;\n\tmargin-left: -3.5rem;\n\tmargin-top: -8rem;\n\tmargin-bottom: .75rem;\n\tfont-size: 8px;\n}\n\nbody.ready .logo {\n\topacity: 1;\n}\n\nbody:not(.iOS) #lines * {\n\tmix-blend-mode: lighten;\n}\n\n#fills * {\n\topacity: 0;\n\tmix-blend-mode: lighten;\n}\n\n#line-i-1 {\n\ttransform-origin: 30em 8em;\n}\n\n/* Fireworks */\n\n.fireworks {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n\n","js":"var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\nvar ff = navigator.userAgent.indexOf('Firefox') > 0;\nvar tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';\nif (iOS) document.body.classList.add('iOS');\n\nvar fireworks = (function () {\n\n var getFontSize = function () {\n return parseFloat(getComputedStyle(document.documentElement).fontSize);\n }\n\n var canvas = document.querySelector('.fireworks');\n var ctx = canvas.getContext('2d');\n var numberOfParticules = 24;\n var distance = 200;\n var x = 0;\n var y = 0;\n var animations = [];\n\n var setCanvasSize = function () {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n\n var updateCoords = function (e) {\n x = e.clientX || e.touches[0].clientX;\n y = e.clientY || e.touches[0].clientY;\n }\n\n var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];\n\n var createCircle = function (x, y) {\n var p = {};\n p.x = x;\n p.y = y;\n p.color = colors[anime.random(0, colors.length - 1)];\n p.color = '#FFF';\n p.radius = 0;\n p.alpha = 1;\n p.lineWidth = 6;\n p.draw = function () {\n ctx.globalAlpha = p.alpha;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);\n ctx.lineWidth = p.lineWidth;\n ctx.strokeStyle = p.color;\n ctx.stroke();\n ctx.globalAlpha = 1;\n }\n return p;\n }\n\n var createParticule = function (x, y) {\n var p = {};\n p.x = x;\n p.y = y;\n p.color = colors[anime.random(0, colors.length - 1)];\n p.radius = anime.random(getFontSize(), getFontSize() * 2);\n p.draw = function () {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);\n ctx.fillStyle = p.color;\n ctx.fill();\n }\n return p;\n }\n\n var createParticles = function (x, y) {\n var particules = [];\n for (var i = 0; i < numberOfParticules; i++) {\n var p = createParticule(x, y);\n particules.push(p);\n }\n return particules;\n }\n\n var removeAnimation = function (animation) {\n var index = animations.indexOf(animation);\n if (index > -1) animations.splice(index, 1);\n }\n\n var animateParticules = function (x, y) {\n setCanvasSize();\n var particules = createParticles(x, y);\n var circle = createCircle(x, y);\n var particulesAnimation = anime({\n targets: particules,\n x: function (p) { return p.x + anime.random(-distance, distance); },\n y: function (p) { return p.y + anime.random(-distance, distance); },\n radius: 0,\n duration: function () { return anime.random(1200, 1800); },\n easing: 'easeOutExpo',\n complete: removeAnimation\n });\n var circleAnimation = anime({\n targets: circle,\n radius: function () { return anime.random(getFontSize() * 8.75, getFontSize() * 11.25); },\n lineWidth: 0,\n alpha: {\n value: 0,\n easing: 'linear',\n duration: function () { return anime.random(400, 600); }\n },\n duration: function () { return anime.random(1200, 1800); },\n easing: 'easeOutExpo',\n complete: removeAnimation\n });\n animations.push(particulesAnimation);\n animations.push(circleAnimation);\n }\n\n var mainLoop = anime({\n duration: Infinity,\n update: function () {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n animations.forEach(function (anim) {\n anim.animatables.forEach(function (animatable) {\n animatable.target.draw();\n });\n });\n }\n });\n\n document.addEventListener(tap, function (e) {\n updateCoords(e);\n animateParticules(x, y);\n }, false);\n\n window.addEventListener('resize', setCanvasSize, false);\n\n return {\n boom: animateParticules\n }\n\n})();\n\nvar logoAnimation = function () {\n\n document.body.classList.add('ready');\n\n var setDashoffset = function (el) {\n var l = el.getTotalLength();\n el.setAttribute('stroke-dasharray', l);\n return [l, 0];\n }\n\n var letters = anime({\n targets: '#lines path',\n strokeDashoffset: {\n value: setDashoffset,\n duration: 700,\n easing: 'easeOutQuad'\n },\n transform: ['translate(0 128)', 'translate(0 0)'],\n delay: function (el, i) {\n return 750 + (i * 120)\n },\n duration: 1400\n });\n\n var dotJSRoll = anime({\n targets: '#dot-js',\n transform: ['translate(0 0)', 'translate(544 0)'],\n delay: letters.duration - 800,\n duration: 800,\n elasticity: 300\n });\n\n var dotJSDown = anime({\n targets: '#dot-js',\n transform: ['translate(0 -304)', 'translate(0 0)'],\n duration: 500,\n elasticity: 600,\n autoplay: false\n });\n\n var dotJSUp = anime({\n targets: '#dot-js',\n transform: ['translate(0 0) scale(1 3)', 'translate(0 -352) scale(1 1)'],\n duration: 800,\n easing: 'easeOutCirc',\n complete: dotJSDown.play\n });\n\n var boom = anime({\n duration: 880,\n complete: function (a) {\n var dot = dotJSDown.animatables[0].target.getBoundingClientRect();\n var pos = { x: dot.left + (dot.width / 2), y: dot.top + (dot.height / 2) }\n fireworks.boom(pos.x, pos.y);\n }\n });\n\n var letterI = anime({\n targets: '#line-i-1',\n strokeDashoffset: {\n value: setDashoffset,\n duration: 700,\n easing: 'easeOutQuad'\n },\n transform: function () {\n return ff ? ['rotate(360)', 'rotate(0)'] : ['rotate(360 240 64)', 'rotate(0 240 64)'];\n },\n duration: 2500,\n delay: letters.duration - 780\n });\n\n var dotI = anime({\n targets: '#dot-i',\n transform: ['translate(0 -352) scale(1 3)', 'translate(0 0) scale(1 1)'],\n opacity: {\n value: [0, 1],\n easing: 'linear',\n duration: 100\n },\n delay: letters.duration + 250\n });\n\n var JSletters = anime({\n targets: ['#line-j', '#line-s'],\n strokeDashoffset: setDashoffset,\n duration: 1400,\n delay: function (el, i) { return (letterI.duration - 1400) + (i * 60) },\n easing: 'easeInOutQuart'\n });\n\n var gradients = anime({\n targets: '#fills *:not(#dot-i)',\n opacity: [0, 1],\n delay: letterI.duration - 300,\n delay: function (el, i, l) {\n var mid = l / 2;\n var index = (i - mid) > mid ? 0 : i;\n var delay = Math.abs(index - mid);\n return (letterI.duration - 1300) + (delay * 30);\n },\n duration: 500,\n easing: 'linear'\n });\n\n}\n\ndocument.addEventListener('DOMContentLoaded', logoAnimation, false);\n\n\n\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"rxo1C8","description":"Fireworks Animation With Anime.Js","plugins":[{"css":{"tailwind":true,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":true,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["css","html","js","game","mage"],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tFireworks Animation With Anime.Js\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n\\n \\n\\n\\t\\n\\t\\n\\t\\t

\\r\\n

\\r\\n \\r\\n

\\r\\n\\r\\n

Click around

\\n\\t\\t\\n \\n\\t\\n\"}]","view":[{"views":578}],"profiles":{"username":"devcanvas"}}]