8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website

Scrolling is among the most basic tasks we ask of users. And, judging from the amount of scrolling on websites and apps these days – we’re asking a lot.

Adding scroll-based effects can be a great way to enhance user experience. That is, so long as they don’t interfere with the ability to navigate through long stretches of content. If anything, effects should make things easier and add a bit of flair to the mix.

Here is a collection of scrolling effects and utilities that will wow your visitors and (hopefully) stay out of their way.

Section by Section by Naoya

Modern webpages are often broken down into multiple content sections – each with its own distinct elements. This handy snippet adds a button (available in a variety of styles) to the bottom of the screen that allows users to click and scroll to the next section down. It uses CSS IDs coupled with jQuery to make the navigation work.

See the Pen
demo:CSS scroll down button by Naoya

All Indications Say You’re Scrolling by MadeByMike

Scroll indicators have become very popular on content-heavy websites. They communicate how far a user is into a story in an easy-to-digest method. Bonus that this solution is CSS-only.

See the Pen CSS only scroll indicator by Mike

You Can Scroll If You Want To by Ryan Mulligan

Okay, this snippet isn’t necessarily an effect on its own. But it does serve a purpose. So often, designers utilize full-screen background images and other elements that may make scrolling ambiguous to the user. With that, small items like this animated scroll icon let users know that yes, there is more content down below. It’s not right for every situation, but there are times when it makes sense.

See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan

The Incredible Shrinking Header by Blake Bowen

Sticky headers like this one have become a staple over the years. Why? They can add a ton of user convenience. The ability to navigate to other areas of a site without having to scroll up to the top of the page just makes life easier. As per usual, this example shrinks into a more compact element as you scroll down the page.

See the Pen Scroll Header by Blake Bowen

Slide to the Right by Ettrics

Here’s another take on the sticky header. This time, it’s fine-tuned for a one-page site. The top navigation automatically highlights the current content section and allows users to quickly switch between them.

See the Pen Sticky Slider Navigation (Responsive) by Ettrics

Flying Colors by JP Nothard

Let’s take a look at another snippet that would be a great fit for one-page sites or a long page with multiple content sections. It uses CSS and a little bit of jQuery to change the background color as you scroll down (and yes, it works in reverse too). You might also want to check out a script that does the same thing, but with gradients.

See the Pen Changing background-color while scrolling version 2 by JP Nothard

Turning Vertical into Horizontal by SitePoint

Have you ever wanted your website to scroll horizontally instead of vertically? You can do that without any fancy scripts, of course. But what if you didn’t want a horizontal scroll bar? In that case, you’d need something like this example. It utilizes a script called jInvertScroll, which turns your site into a side-scroller, complete with parallax effects.

See the Pen Side Scrolling from jInvertScroll by SitePoint

Animate on Scroll by Snik

Among the bigger trends these days is animating content as it comes into the viewport. When tastefully done, it can bring attention to each section. But go too far and it becomes more like an online circus act. If you decide to take the plunge, consider this snippet. It’s powered by the AOS (animate on scroll) library.

See the Pen AOS – animations by Snik

Scroll On, Web User

Back in the day, the prevailing thought was to avoid scrolling at all costs. Now, social media and smartphones have trained us to cover long expanses with our thumbs (and cursors). So, we might as well make it both fun and useful.

That’s what the snippets above aim to do. They cover a variety of use cases and, for the most part, steer clear of being obtrusive. It’s what building a solid UX is all about.

More CSS Effects Snippets