10 CSS & JavaScript Parallax Scrolling Code Snippets

There’s a lot of confusion about parallax design and how it works on the web. Generally speaking, parallax design is the use of motion to create the illusion of depth on a page.

This can relate to background changes or semi-fixed position items that move alongside the user’s scrolling. We’ve covered many examples from websites but haven’t gone into detail about the techniques involved.

For this collection I’ve picked my favorite parallax designs that offer free source code you can play around with and even bring into your own projects.

1. The Great Fall

The Great Fall designed by CJ Gammon 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’s built on canvas elements controlled through JavaScript, so it’s got a pretty technical setup.

Not to mention the page also has small tooltip windows that feature content boxes of relevant info. This effect is insanely cool and it’s something you could replicate with decent JavaScript knowledge.

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

2. CSS Scrolling Parallax

Here’s a much 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 great parallax design.

Developer Sebastian Schepis used pure 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.

3. Simple Image Tag Parallax

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.

In this snippet developer Renan Breno spent some time messing with the scroll speed to show how it can vary wildly.

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

4. #Maincode Hackdays

Fixed image backgrounds work well to split up pages and divide content section evenly. You can see a fine example in this pen created for the Hackdays event.

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.

5. CSS Parallax

This parallax pen created by Paulo Cunha 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.

I think this would work best for single blog posts with large featured images, or for landing pages that use large heros to grab attention.

6. Parallax Design

Here’s an interesting parallax design for a sample wedding page created by Katie Rogers.

It has the 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. Very nice idea for a single page layout.

7. Scrolling Background-Image Parallax

Earlier I mentioned how scroll speed could vary based on the background position change rate.

Well, this example, designed by Rich Howell, is the perfect comparison to see how this works in action.

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

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

8. Starry Background

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

All of the animations run through CSS, but this pen uses Sass and Compass, so they would be useful to understand before making edits.

But you could just copy/paste this into your layout without making too many edits. CodePen lets you compile Sass down to CSS with the click of a button, so it’s also no trouble getting the original code.

9. Canvas Parallax Skyline

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.

10. Hover Parallax

One other mouse-targeted parallax effect is this design created by Thulio Philipe. It doesn’t overtake the entire page so it has a very different concept of parallax.

Instead of creating depth with the content it uses motion against the mouse to create depth inside the image.

Each item inside the container has its own “layer” in HTML. As you move your mouse through this container it looks like some of the images appear on top of others.

It all runs through JavaScript and it’s a pretty cool effect for the web. You might try using this in a banner design or in a custom page header.

11. Broken Glass Filter

I’ve seen this effect on websites before and it creates 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.

Comments