On webpages like the Animade portfolio, they're using an effect where, instead of using an animated GIF, they're using a video that plays when your mouse goes over it, and pauses when your mouse moves away. This play and pause effect is pretty simple to add into any site.

In this tutorial we look at how to build the image lazy loading effect used on the Teenage Engineering site. We'll start with a lo-res pixelated image before replacing it with the full-res version.

Pixelated Image Lazy Loading Effect as Seen on Teenage Engineering

Code

Today, we talk about how to add the graphic design technique of having text around the edges of your page. Using a quick rotation and setting the origin for the rotation, we can place text as we want it quickly and easily.

Playing and Pausing a Video on Hover

More videos

Planning, Designing + Coding Your First iOs App with Lou

How to Make a Javascript Accordion

How to Add International Times with Timezones to Your Website

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration!