Zoom Slider
In Blueprints by Manoela Ilic
A simple content slider with depth-like zoom functionality for a predefined area in each slide.
#slideshow
Color Extraction Effect
In Playground by Manoela Ilic
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
Prism Effect Slider with Canvas
In Tutorials by Claudio Calautti
A tutorial on how to create a slider with a “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique.
Playful Trampoline Effect
In Tutorials by Manoela Ilic
A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.
Sliding Header Layout
In Tutorials by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
Perspective Mockup Slideshow
In Playground by Manoela Ilic
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.
Wobbly Slideshow Effect
In Playground by Manoela Ilic
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths.
Draggable Dual-View Slideshow
In Playground by Manoela Ilic
An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
How to Create a Tiled Background Slideshow
In Tutorials by Manoela Ilic
A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.
Inspiration for Item Transitions
In Playground by Manoela Ilic
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.
Tilted Content Slideshow
In Tutorials by Manoela Ilic
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
Sliding Horizontal Layout
In Playground by Manoela Ilic
A slider-like layout where the neighboring sections are positioned horizontally next to each other.
Interactive Particles Slideshow
In Playground by Francesco Trillini
An interactive particles slideshow experiment built with HTML5 Canvas.
Morphing Devices
In Playground by Manoela Ilic
An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots.
Background Slideshow
In Blueprints by Manoela Ilic
A fullscreen background slideshow with autoplay functionality.
Quotes Rotator
In Blueprints by Manoela Ilic
A simple automatic quotes rotator with progress bar and example media query.
Full Width Image Slider
In Blueprints by Manoela Ilic
A very simple 100% width slider that scales down to mobile.
Elastic Content Slider
In Blueprints by Manoela Ilic
A fluid content slider that will adjust in width and height depending on the size of its parent.