The Verge’s glitchy titles got to me, which led to its reverse engineering, and trying to improve it by building upon it. This also led me to search codepen for some ‘disruptive’ css3 text effects, and I found another two of them that are kinda awesome.
Here are the codepens for all three, and a bonus pen too.
CSS Only Glitch Effect
Here’s a great CSS only Glitch effect for your titles, and consideration. I do not know what kind of readability will this destroy, but in all fairness this definitely looks hip.
See the Pen CSS-Only Glitch Effect by Justin
CSS, JavaScript Based Text VHS Effect
Too over the top, and too over the place, but this one’s got some potential if you are willing to play around a bit, and make it more stable for minimizing the readability issues, and concerns. Even so, use at your own peril.
See the Pen VHS text by Maria.
Building Upon The Verge’s Glitch Text Effect
By far the most subtle, and attention grabbing effect is used by The Verge on their post titles. Though I did end up going a little over the top with it, while playing around, and trying to understand how they got this working. I think, I’ll keep playing with this one, and see where this one goes. In the case you’re interested in what I’ve come up with, so far, then the pen is embedded below.
See the Pen Building upon The Verge’s Glitch text effect by indefiniteloop@codepen.
Keep an eye here for the final pen, whenever that gets done.
Bonus: Auto Typing Text, Nicely Done
While browsing codepen.io, I kinda stumbled upon this one too, and it does look awesome, and it does keep the readability intact. The typing speed is perfect for reading, and it doesn’t loop.
See the Pen Auto Typing Text (function) by Connor Gaunt</a>
