How to Code a Crosshair Mouse Cursor with Distortion Hover Effect
By Mary Lou on
A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.
menu
Rotated 3D Letters and Image Hover Effect
By Mary Lou on
A rotated 3D like letters hover effect combined with a tilted image for a menu.
Inline Menu Layout with Gallery Panel
By Mary Lou on
An inline menu layout with a playful hover animation and a gallery content preview panel.
Menu to Inner Page Animation with Image Grid Background
By Mary Lou on
A layout with a menu and background image grid that animates to an inner content page.
Exploring Animations for Menu Hover Effects
By Mary Lou on
A couple of ideas for creative menu hover animations with images.
Creating a Menu Image Animation on Hover
By Mary Lou on
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
An Infinitely Scrollable Vertical Menu
By Mary Lou on
A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.
Morphing Gooey Text Hover Effect
By Mary Lou on
Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
CSS-Only Marquee Effect
By Mary Lou on
A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.
Building a Physics-based 3D Menu with Cannon.js and Three.js
By Arno Di Nunzio on
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
Case Study: Chang Liu Portfolio V4
By Chang Liu on
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.
Draggable Menu with Image Grid Previews
By Mary Lou on
A draggable inline menu with a scattered thumbnail preview of an image grid.
How to Build an Underwater-Style Navigation Using PixiJS
By Liam Egan on
A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation.
Animated Grid Previews
By Mary Lou on
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an "explore" link is clicked.
Multibox Menu
By Mary Lou on
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
Slide Out Box Menu
By Mary Lou on
A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.
Expanding Grid Menu
By Mary Lou on
A CSS Grid powered menu with a box look inspired by the effect seen in the "Ableton Live 10: What's New" video.
Dynamic Shape Overlays with SVG
By Yoichi Kobayashi on
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.