Inspired by 14Islands pen, but using the Web Animation API to randomize the text fade-in effect. Complete explanatory article
A Pen by Dudley Storey on CodePen.
Created
April 20, 2018 02:36
-
-
Save CodeMyUI/cbcb4cb427ac02af7a3d85d5dc108073 to your computer and use it in GitHub Desktop.
Quote Effect w/ Web Animation API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <blockquote contenteditable="true"><q>What we think, we become.</q> | |
| <cite>Gautama Buddha</cite> | |
| </blockquote> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function splitWords() { | |
| let quote = document.querySelector("blockquote q"); | |
| quote.innerText.replace(/(<([^>]+)>)/ig,""); | |
| quotewords = quote.innerText.split(" "), | |
| wordCount = quotewords.length; | |
| quote.innerHTML = ""; | |
| for (let i=0; i < wordCount; i++) { | |
| quote.innerHTML += "<span>"+quotewords[i]+"</span>"; | |
| if (i < quotewords.length - 1) { | |
| quote.innerHTML += " "; | |
| } | |
| } | |
| quotewords = document.querySelectorAll("blockquote q span"); | |
| fadeWords(quotewords); | |
| } | |
| function getRandom(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| function fadeWords(quotewords) { | |
| Array.prototype.forEach.call(quotewords, function(word) { | |
| let animate = word.animate([{ | |
| opacity: 0, | |
| filter: "blur("+getRandom(2,5)+"px)" | |
| }, { | |
| opacity: 1, | |
| filter: "blur(0px)" | |
| }], | |
| { | |
| duration: 1000, | |
| delay: getRandom(500,3300), | |
| fill: 'forwards' | |
| } | |
| ) | |
| }) | |
| } | |
| splitWords(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background: #000; | |
| color: #fff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| blockquote { | |
| font-size: 3rem; | |
| } | |
| cite { | |
| display: block; | |
| text-align: right; | |
| font-family: Verdana, Arial, sans-serif; | |
| margin-top: 1rem; | |
| font-size: .9rem; | |
| color: #aaa; | |
| font-style: normal; | |
| } | |
| blockquote q { | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| letter-spacing: .1rem; | |
| } | |
| blockquote q span { | |
| will-change: opacity, filter; | |
| opacity: 0; | |
| filter: blur(0px); | |
| } | |
| q { | |
| quotes: "“" "”" "‘" "’"; | |
| } | |
| q:before { | |
| content: open-quote; | |
| margin-right: .8rem; | |
| } | |
| q:after { | |
| content: close-quote; | |
| } | |
| q:before, q:after { | |
| color: #ccc; | |
| font-size: 4rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, Complete explanatory article links to this page itself! Can u link the article instead if there is one ?