Interactive WebGL Hover Effects
In Tutorials, by Yuri Artiukh
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
hover
Rapid Image Layers Animation
In Playground, by Manoela Ilic
A rapid animation of multiple layers of images for intros or page transitions.
CSS-Only Marquee Effect
In Playground, by Manoela Ilic
A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot.
Animated Custom Cursor Effects
In Playground, by Manoela Ilic
Some ideas for interactive custom cursor animations using SVG filters.
Ideas for Distorted Link Effects on Menus
In Playground, by Manoela Ilic
Some examples of how to use decorative distortion effects on big typography menu links.
Background Scale Hover Effect with CSS Clip-path
In Playground, by Manoela Ilic
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
Distorted Link Effects with SVG Filters
In Playground, by Manoela Ilic
A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL
In Tutorials, by Francesco Michelini
Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js.
Making Gooey Image Hover Effects with Three.js
In Tutorials, by Arno Di Nunzio
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
How to Create Motion Hover Effects with Image Distortions using Three.js
In Tutorials, by Niccolò Miranda
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
Case Study: Chang Liu Portfolio V4
Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu’s new portfolio.
Mouse Flowmap Deformation with OGL
In Playground, by Robin Delaporte
A set of WebGL demos using OGL that show an interactive fluid distortion hover effect.
React Slider with Parallax Hover Effects
In Tutorials, by Ryan Mulligan
Walk through the build of a React slider and learn how to implement a parallax hover effect.
Animated Image Columns
In Playground, by Manoela Ilic
An experimental web layout where several image columns get animated out when a menu item is clicked.
How to Build an Underwater-Style Navigation Using PixiJS
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
How to Create a Sticky Image Effect with Three.js
In Tutorials, by Daniel Velasquez
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Image Distortion Effects with SVG Filters
In Playground, by Manoela Ilic
Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
Custom Cursor Effects
In Tutorials, by Stefan Kaltenegger
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.
