Image Trail Effects

A set of brutalist effects for mouse-following image trails that show a random series of images.
ImageTrailEffects_featured

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today we’d like to share a fun mouse interaction effect with you that we found on the VLNC Studio website. The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations.

The animations are powered by TweenMax.

Attention: Note that the demos are experimental and that we use modern CSS properties that might not be supported in older browsers.

The main idea is to show the images quickly so that a trail forms along the movement of the mouse.

ImageTrailEffects_01

While there’s different ways to show the images, there’s also lots of room to play with the effects that make them disappear.

ImageTrailEffects_02

Demo 3 shows how we can make the images “drop” when they disappear:

ImageTrailEffects_03

We can also add a bit of a squeeze, too:

ImageTrailEffects_04

The last demo explores setting the size of the image to be fullscreen and restricting the movement to the sides only:

ImageTrailEffects_05

This effect is inspired by Ricky Michiels website.

Here’s a short GIF that shows the effect of demo 2 where we scale the images up and fade them out:

ImageTrailEffects.2019-08-07 11_22_55

We hope you enjoy these demos and find them useful.

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.