The code that powers the text animations shown here: http://projects.fivethirtyeight.com/.
FiveThirtyEight text animation
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <svg viewBox="0 0 500 50"> | |
| <symbol id="s-text"> | |
| <text text-anchor="middle" x="50%" y="50%" dy=".35em">FiveThirtyEight Interactives</text> | |
| </symbol> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use> | |
| <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text"></use> | |
| </svg> | |
| </div> | |
| </body> | |
| </html> |
| body { | |
| background-color: #444; | |
| -webkit-font-smoothing: antialiased; | |
| text-transform: uppercase; | |
| } | |
| .text { | |
| fill: none; | |
| font-size: 1.5em; | |
| stroke-width: 3; | |
| stroke-linejoin: round; | |
| stroke-dasharray: 70 340; | |
| stroke-dashoffset: 0; | |
| -webkit-animation: stroke 8s infinite linear; | |
| animation: stroke 8s infinite linear; | |
| letter-spacing: 0.1em; | |
| } | |
| .text:nth-child(5n+1) { | |
| stroke: #ffe100; | |
| -webkit-animation-delay: -1.6s; | |
| animation-delay: -1.6s; | |
| } | |
| .text:nth-child(5n+2) { | |
| stroke: #e9f1df; | |
| -webkit-animation-delay: -3.2s; | |
| animation-delay: -3.2s; | |
| } | |
| .text:nth-child(5n+3) { | |
| stroke: #f2385a; | |
| -webkit-animation-delay: -4.8s; | |
| animation-delay: -4.8s; | |
| } | |
| .text:nth-child(5n+4) { | |
| stroke: #56d9cd; | |
| -webkit-animation-delay: -6.4s; | |
| animation-delay: -6.4s; | |
| } | |
| .text:nth-child(5n+5) { | |
| stroke: #3aa1bf; | |
| -webkit-animation-delay: -8s; | |
| animation-delay: -8s; | |
| } | |
| @-webkit-keyframes stroke { | |
| to { | |
| stroke-dashoffset: -410; | |
| } | |
| } | |
| @keyframes stroke { | |
| to { | |
| stroke-dashoffset: -410; | |
| } | |
| } | |
| svg { | |
| width: 100%; | |
| height: 100px; | |
| margin-top: 15px; | |
| } | |
| svg text { | |
| font-family: DecimaMonoPro, Helvetica, sans-serif; | |
| text-transform: uppercase; | |
| } | |
| @media all and (-ms-high-contrast:none), | |
| (-ms-high-contrast:active) { | |
| #projects .header { | |
| display: none; | |
| } | |
| #projects .header.ie { | |
| display: block; | |
| margin: 0 0 25px; | |
| } | |
| #projects .header.ie .text { | |
| text-transform: uppercase; | |
| font: 56px DecimaMonoPro; | |
| color: #ffe100; | |
| text-align: center; | |
| font-weight: 700; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment