\r\n Having\r\n Fun\r\n With\r\n\r\n \r\n D\r\n e\r\n v\r\n C\r\n a\r\n n\r\n v\r\n a\r\n s\r\n ?\r\n \r\n

\r\n

\r\n\r\n\r\n","css":"body {\r\n margin: 0;\r\n padding: 0;\r\n font-family: Arial, sans-serif;\r\n background-color: #fefaf6;\r\n color: rgb(218, 192, 163);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n}\r\n\r\n.intro {\r\n text-align: center;\r\n}\r\n\r\n.intro-text {\r\n font-size: 4rem;\r\n font-weight: bold;\r\n line-height: 1.2;\r\n}\r\n\r\n.intro-text__word {\r\n display: inline-block;\r\n opacity: 0;\r\n transform: translateY(50%);\r\n}\r\n\r\n@keyframes intro-animation {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(50%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.intro-text__word--devcanvas {\r\n animation-delay: 0.6s;\r\n display: flex;\r\n flex-direction: row;\r\n color: #102c57;\r\n}\r\n\r\n.intro-text__letter {\r\n display: inline-block;\r\n opacity: 0;\r\n}\r\n\r\n@keyframes letter-animation {\r\n 0% {\r\n opacity: 0;\r\n transform: rotateY(-90deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: rotateY(0);\r\n }\r\n}\r\n\r\n.restart-btn {\r\n position: fixed;\r\n bottom: 0;\r\n margin: 30px;\r\n border: 0;\r\n background: #eadbc8;\r\n padding: 10px 30px;\r\n cursor: pointer;\r\n}\r\n.restart-btn:hover {\r\n background: #dac0a3;\r\n}\r\n","js":"const restartBtn = document.querySelector(\".restart-btn\");\r\nconst textWord = document.querySelectorAll(\".intro-text__word\");\r\nconst textLetter = document.querySelectorAll(\".intro-text__letter\");\r\n\r\nfunction restartAnimation() {\r\n // Reset animations on text words\r\n textWord.forEach((word) => {\r\n word.style.animation = \"none\";\r\n word.offsetHeight; // Trigger reflow\r\n word.style.animation = null;\r\n word.style.opacity = 0;\r\n });\r\n\r\n // Reset animations on text letters\r\n textLetter.forEach((letter) => {\r\n letter.style.animation = \"none\";\r\n letter.offsetHeight; // Trigger reflow\r\n letter.style.animation = null;\r\n letter.style.opacity = 0;\r\n });\r\n\r\n // Restart animations after a short delay\r\n setTimeout(() => {\r\n textWord.forEach((word, index) => {\r\n word.style.animation = `intro-animation 1s ease-out forwards ${\r\n index * 0.3\r\n }s`;\r\n });\r\n\r\n textLetter.forEach((letter, index) => {\r\n letter.style.animation = `letter-animation 0.5s ease-out forwards ${\r\n index * 0.1 + 0.6\r\n }s`;\r\n });\r\n }, 100);\r\n}\r\n\r\nrestartAnimation();\r\nrestartBtn.addEventListener(\"click\", restartAnimation);\r\n","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"1GFaUc","description":"Progressive Animation - Devcanvas","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":580}],"profiles":{"username":"devcanvas"}}]