parallax

Horizontal Smooth Scroll Layouts

By Mary Lou on December 8, 2020

Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.

Crafting a Scrollable and Draggable Parallax Slider

By Ruud Luijten on December 1, 2020

A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.

Crafting a Cutout Collage Layout with CSS Grid and Clip-path

By Bri Camp Gomez on February 5, 2020

Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.

Scroll, Refraction and Shader Effects in Three.js and React

By Paul Henschel on December 16, 2019

Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.

React Slider with Parallax Hover Effects

By Ryan Mulligan on August 20, 2019

Walk through the build of a React slider and learn how to implement a parallax hover effect.

Layer Motion Slideshow

By Mary Lou on January 24, 2019

A CSS Grid-based slideshow template with a layer motion effect on the main image and title.

Animated Grid Previews

By Mary Lou on October 31, 2018

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.

CSS Grid Layout Slideshow

By Mary Lou on July 19, 2017

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

Little Fragments: Creating a Simple Image Poster Effect

By Mary Lou on January 19, 2017

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

Fluid CSS3 Slideshow with Parallax Effect

By Rey Wang on April 30, 2012

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds whi

Parallax Content Slider with CSS3 and jQuery

By Mary Lou on March 15, 2012

A simple parallax content slider with different animations for each slider element and a background parallax effect.

Showcase of Parallax Usage in Web Design

By Mary Lou on March 7, 2011

The use of the parallax effect or parallax scrolling effect in websites can add a nice three dimensional depth illusion to the design and make the visit very interes

Parallax Slider with jQuery

By Mary Lou on January 3, 2011

Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different backgrounds when we slide