Stop your busy day for a few minutes and explore the code of these handpicked CodePen demos.
You’ll learn how to create a simple but effective neon glow effect, how to make your objects shine with Greensock and how to create an animated steps by step guide.
CSS3 Neon Glow
This pulsing neon glow effect is created by CSS3 animations of the
text-shadow property. Each of the glowing headlines have a
multiple text-shadows applied to them.
The values in the
from keyframe are double the size of the
to keyframe. The animations is repeated infinitely on hover and animation direction is set to alternate.
3D with shine/glare
We all know that Greensock is the right tool for any advanced animations on the web. With a few lines of code you can create this interesting effect.
In this demo the
.box is animating from
rotationY:30 while the slightly bigger
.shine is moving from
Simple use of Waypoints.js and CSS3 animations creates this animated step by step effect. It is created by adding an extra class
.seen to the visible
It is also using the Waypoints build-in offset
bottom-in-view to trigger the animation when the bottom of the step is in the browser viewport.
By default all
li items are set to
opacity: 0; translateX: -100px and the
.seen class then animates visible items to
opacity: 1; translateX: -100px.
When you explore these CodePen demos closely you’ll realize that it only takes a few lines of code and a creative thinking to come up with a similar effects.
And now back to work, your boss is watching. When he’s not, let me know in the comments below what you think about today’s picks and what is your take away from them.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.