Forked from Chris Coyier's Pen Fun with Blurred Text.
A Pen by Captain Anonymous on CodePen.
Forked from anonymous/Fun-with-Blurred-Text.markdown
Last active
August 29, 2015 14:13
-
-
Save BinaryKitten/34d35606fe74186c7856 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <section> | |
| <h2 class="smokemonster animHack">Smokemonster</h2> | |
| </section> | |
| <section> | |
| <h2 class="sparklemaster animHack">Sparklemaster</h2> | |
| </section> | |
| <section> | |
| <h2 class="hovertown">Hovertown</h2> | |
| </section> | |
| <section> | |
| <h2 class="foreverblur">Modernizblur</h2> | |
| </section> | |
| <section> | |
| <h2 id="jquerybuddy">FringeDivision</h2> | |
| </section> |
This file contains hidden or 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($) { | |
| // hack to get animations to run again | |
| $("h2") | |
| .lettering() | |
| .filter('.animHack') | |
| .click(function() { | |
| var el = $(this); | |
| el.before(el.clone(true)).remove(); | |
| }); | |
| var text = $("#jquerybuddy"), | |
| numLetters = text.find("span").length, | |
| randomBlurize = function() { | |
| var nthChild = (Math.floor(Math.random()*numLetters)+1), | |
| rndColor = (Math.floor(Math.random()*200)+55); | |
| text | |
| .find("span:nth-child(" + nthChild + ")") | |
| .animate({ | |
| 'textShadowBlur': Math.floor(Math.random()*25)+4, | |
| 'textShadowColor': 'rgba(0,100,0,' + rndColor + ')' | |
| }); | |
| // Call itself recurssively | |
| setTimeout(randomBlurize, 100); | |
| } // Call once | |
| randomBlurize(); | |
| })(jQuery); |
This file contains hidden or 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
| h2 { | |
| color: black; | |
| display: block; | |
| font: bold 72px Helvetica; | |
| text-transform: uppercase; | |
| letter-spacing: -1px; | |
| } | |
| .hovertown span { | |
| transition: all 0.9s ease; | |
| } | |
| .hovertown span:hover { | |
| text-shadow: 0 0 72px black; | |
| color: transparent; | |
| transition: all 0.2s ease; | |
| } | |
| @keyframes blackblur { | |
| from { text-shadow: 0 0 72px black; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| .smokemonster span:nth-of-type(1) { animation: blackblur 2s 1 alternate; } | |
| .smokemonster span:nth-of-type(2) { animation: blackblur 2s 0.1s 1 alternate; } | |
| .smokemonster span:nth-of-type(3) { animation: blackblur 2s 0.15s 1 alternate; } | |
| .smokemonster span:nth-of-type(4) { animation: blackblur 2s 0.2s 1 alternate; } | |
| .smokemonster span:nth-of-type(5) { animation: blackblur 2s 0.25s 1 alternate; } | |
| .smokemonster span:nth-of-type(6) { animation: blackblur 2s 0.3s 1 alternate; } | |
| .smokemonster span:nth-of-type(7) { animation: blackblur 2s 0.35s 1 alternate; } | |
| .smokemonster span:nth-of-type(8) { animation: blackblur 2s 0.4s 1 alternate; } | |
| .smokemonster span:nth-of-type(9) { animation: blackblur 2s 0.45s 1 alternate; } | |
| .smokemonster span:nth-of-type(10) { animation: blackblur 2s 0.5s 1 alternate; } | |
| .smokemonster span:nth-of-type(11) { animation: blackblur 2s 0.55s 1 alternate; } | |
| .smokemonster span:nth-of-type(12) { animation: blackblur 2s 0.6s 1 alternate; } | |
| @keyframes fun-1 { | |
| from { text-shadow: 0 0 72px red; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| @keyframes fun-2 { | |
| from { text-shadow: 0 0 22px blue; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| @keyframes fun-3 { | |
| from { text-shadow: 0 0 152px green; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| @keyframes fun-4 { | |
| from { text-shadow: 0 0 102px cyan; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| @keyframes fun-5 { | |
| from { text-shadow: 0 0 222px magenta; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| @keyframes fun-6 { | |
| from { text-shadow: 0 0 92px yellow; color: transparent; } | |
| to { text-shadow: 0; color: black; } | |
| } | |
| .sparklemaster { color: white; } | |
| .sparklemaster span:nth-of-type(1) { animation: fun-1 2s 0.2s 1 alternate; } | |
| .sparklemaster span:nth-of-type(2) { animation: fun-2 2s 3.9s 1 alternate; } | |
| .sparklemaster span:nth-of-type(3) { animation: fun-3 2s 2.65s 1 alternate; } | |
| .sparklemaster span:nth-of-type(4) { animation: fun-4 2s 2.2s 1 alternate; } | |
| .sparklemaster span:nth-of-type(5) { animation: fun-5 2s 1.25s 1 alternate; } | |
| .sparklemaster span:nth-of-type(6) { animation: fun-6 2s 2.3s 1 alternate; } | |
| .sparklemaster span:nth-of-type(7) { animation: fun-1 2s 3.35s 1 alternate; } | |
| .sparklemaster span:nth-of-type(8) { animation: fun-2 2s 2.4s 1 alternate; } | |
| .sparklemaster span:nth-of-type(9) { animation: fun-3 2s 1.45s 1 alternate; } | |
| .sparklemaster span:nth-of-type(10) { animation: fun-4 2s 3.5s 1 alternate; } | |
| .sparklemaster span:nth-of-type(11) { animation: fun-5 2s 1.55s 1 alternate; } | |
| .sparklemaster span:nth-of-type(12) { animation: fun-6 2s 2.6s 1 alternate; } | |
| .textshadow .foreverblur { | |
| text-shadow: 0 0 32px white; | |
| color: transparent; | |
| } | |
| #jquerybuddy span { | |
| text-shadow: 0 0 4px rgba(0,100,0,1); | |
| color: transparent; | |
| } | |
| section { padding: 10px 100px; text-align: center;} | |
| section:nth-child(odd) { background: #eee; } | |
| section:nth-child(even) { background: #333; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment