Add Scroll Effects & Utilities to Your Website with These CSS & JS Snippets
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
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
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 (@MadeByMike)
You Can Scroll If You Want To
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
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
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
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
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
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.
Looking for more ideas? Take a look at our CodePen collection for additional scroll snippets!
The post Add Scroll Effects & Utilities to Your Website with These CSS & JS Snippets appeared first on Speckyboy Design Magazine.