How to Create Motion Hover Effects with Image Distortions using Three.js
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques.
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
by Kyle Wetton
In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click.
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing.
Learn how to create a geometrical scene with a depth effect using the Blurry library.
How to make a WebGL mouse trail, and other important life tips…
by Kyle Wetton
Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial.
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user’s webcam.
by Kyle Wetton
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.
Walk through the build of a React slider and learn how to implement a parallax hover effect.
by Manoela Ilic
A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
by Liam Egan
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.
Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components.
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
by Yuri Artiukh
Learn how to create an interactive “fake” 3D effect for images with depth maps and plain WebGL.