A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
A Pen by Stephen Scaff on CodePen.
<nav class="toc"> | |
<ul> | |
<li><a href="#intro">Intro</a></li> | |
<li> | |
<a href="#dev">Developer Mode</a> | |
<ul> | |
<li><a href="#dev-edit-html">Edit HTML</a></li> | |
<li><a href="#dev-element-classes">Element Classes</a></li> | |
<li><a href="#dev-slide-classes">Slide Classes</a></li> | |
<li><a href="#dev-export-html">Export HTML</a></li> |
A little glowing text animation. First, some js to wrap each letter in a span. Then a keyframe animation, with animation-delay mixin, lights up each letter in succession.
A Pen by Stephen Scaff on CodePen.
Experimenting with more text effects using CSS animations and jQuery to keep the markup down.
The delay is added via drop.styles() on the fly, you could I guess make all the CSS required on the fly using the same method but I've kept these separate for now. The animation effect, look and feel are customised via the CSS the way they should be. The JS plugin is a helper for all the repetition needed to create the effects on each letter.
Version 0.0.8 out now! Fork me on GitHub https://github.com/KryptoniteDove/letter-drop
Forked from Rich's Pen LETTER DROP.