10 CSS & JavaScript Snippets for Creating the Parallax Scrolling Effect

Parallax design is a technique that has been growing in popularity on the web, but it can also be a source of confusion for many designers and developers. Essentially, parallax design uses motion to create the illusion of depth on a webpage.

This can be achieved through various techniques, such as background changes or semi-fixed position items that move alongside the user’s scrolling. While we have previously shared examples of parallax design on websites, we haven’t delved into the technical aspects of how it works.

To remedy this, we have compiled a collection of our favorite CSS and JavaScript snippets for creating parallax layouts. Each of these examples is accompanied by free source code, so you can experiment with them and even incorporate them into your own projects.

By leveraging the power of parallax design, you can add an extra layer of visual interest to your web pages and enhance the user experience. So why not explore our collection and discover how you can incorporate parallax design into your own projects today?

1. The Great Fall by CJ Gammon

This parallax example is one of the most unique interfaces I’ve ever found. It uses a custom script to create a waterfall sprite that seems to flow endlessly down the page. It has been built on canvas elements controlled through JavaScript, so it’s a pretty technical setup.

For the most part, this is a testament to what’s possible in modern web development. Learning the canvas element gives you a lot of control over your design.

See the Pen The Great Fall by CJ Gammon

2. CSS Scrolling Parallax by Sebastian Schepis

Here’s a more practical parallax effect with a fixed background and larger pages on top. When you scroll, each page section appears above the background. This creates the illusion of depth, and it’s one of the key elements to an excellent parallax design.

Developer Sebastian Schepis has used only CSS for this page, and it’s a pretty simple concept. I think anybody could clone this with ease, not to mention the background design could be greatly enhanced.

See the Pen CSS Scrolling Parallax Effect by Sebastian Schepis

3. Simple Image Tag Parallax by Renan Breno

You’ll often find parallax designs coupled with large fullscreen background images. These are all too common on company sites & startups where they usually feature a certain parallax “scroll speed” for the background.

The difference here isn’t so much in how fast you’re scrolling down the page or how large the image placement is. Instead, you see how quickly the image moves through the page’s background while you scroll. It’s a subtle parallax effect, but this layout is an excellent template to see the different animation speeds in action.

See the Pen Simple Image Tag Parallax by Renan Breno

4. Parallax & Fixed Image Backgrounds

Fixed image backgrounds work well to split up pages and divide content sections evenly. As you scroll, it can feel like the individual page sections are higher than the background images. This is all by design to breathe life into the parallax effect while scrolling.

I wouldn’t use this exact layout because the content areas seem a bit thin. But if you do like this style, I’d recommend punctuating each page section with a different image relevant to your website.

See the Pen #Maincode Hackdays by chaobu

5. CSS Parallax by Paulo Cunha

This parallax example is a unique example of how parallax effects work. All the page content rests underneath a large hero image which disappears beneath the content on scroll. This also uses the fixed image position to make it appear as if the page is moving over the image, rather than the image staying fixed in place.

You can use this same effect with a long scrolling layout and it’d have a similar design style. This would work best for single blog posts with large featured images or landing pages that use large heroes to grab attention.

See the Pen CSS Parallax by Paulo Cunha

6. Parallax Design by Katie Rogers

Here’s an interesting parallax design for a sample wedding page. It has a split page design where images separate the many different content areas with parallax fixed scrolling. Everything runs on CSS, which is a nice touch, and all background images stay fixed while moving down the page.

This effect works because the content areas have large box shadows dropping over the backgrounds. Naturally, this creates the illusion of depth by giving the page a theoretical light source and hierarchy — a very nice idea for a single-page layout.

See the Pen Parallax Design by Katie Rogers

7. Scrolling Background-Image Parallax by Rich Howell

Earlier, I mentioned how scroll speed could vary based on the background-position change rate. This example is the perfect comparison to see how this works in action.

Note that you’ll need to use the scrollbar to see the effects of this example. I tried with the mouse wheel and couldn’t see any difference, but you’ll notice speed changes across the columns when you move the scrollbar.

None of these speeds are wrong or inaccurate depictions of parallax design. They’re just different methods for creating movement on the page, and this little example is a great way to visualize many options.

See the Pen Scrolling Background-Image Paralax by Rich Howell

8. Starry Parallax Background by Saransh Sinha

While this effect does not relate to scrolling, it directly relates to parallax design. It uses pure CSS to create a parallax star animation in the page’s background. You can add text and even a content area over the page, but the stars immediately create depth at first glance.

The animation runs through CSS, but this snippet uses Sass and Compass, so it would be helpful to understand before making edits.

See the Pen Parallax Star background in CSS by Saransh Sinha

9. Canvas Parallax Skyline by Jack Rugile

Sometimes, parallax designs also target mouse movement along with scrolling features. This canvas design creates an endless skyline effect that reacts to mouse movement on the page. As you reposition your mouse, the viewing angle alters. But the animation stays the same, and you can see this skyline moving with a clear visual hierarchy.

Naturally, this does require JavaScript for the animation because it’s a pretty complex idea. But it’s also not something you’ll find on many websites, so it’s not something you’ll copy over to your site either. But as a parallax concept, this one’s really interesting.

See the Pen Canvas Parallax Skyline by Jack Rugile

10. Broken Glass Filter by Bajjy Xilo

I’ve seen this effect on websites before, creating a very peculiar design. The broken glass filter gives the illusion of a background image being split into many different parts. It almost looks like the image was on a pane of glass, and it shattered, fracturing the picture and skewing the image.

You can replicate this effect with pure CSS, and it’s one of those neat effects that’s cool to do but may not have any practical, real-world usage beyond fancy designs. Still, this is an impressive example of parallax depth and motion while scrolling.

See the Pen BrokenGlass css filter by Bajjy Xilo

More CSS Effects Snippets