2

8 Scroll Effects To SUPERCHARGE Your UX! 👆️✨️

 2 years ago
source link: https://dev.to/bestofstuff/8-scroll-effects-to-supercharge-your-ux-4nm9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Scroll effects are an easy way to improve the user experience of your website, so I created a list of the best scrolling effects!

Parallax Effect

Parallax is when closer objects move faster than farther objects. This amazing real-life effect is on the web too!

CSS-only Scroll Snapping

Did you know that you can add scroll snapping to your site without using Javascript? I sure didn't, but when I found out, I was completely shocked!

.carousel {
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
}

Enter fullscreen mode

Exit fullscreen mode

CSS-only Scrolling Indicator

From blogs to news sites, scrolling indicators are everywhere! Did you know that you didn't need Javascript to make one?

You can scroll if you want to

It's often useful to tell the user that they can scroll down to view more content. Here is a cool example of that!

Shrinking Header

Make a header start large, then become smaller as the user scrolls down. This little effect is very common and you can easily add it to your site using CSS!

Sticky Navbar

Navbars are very important. Users use them to know where they are in the site and where they can go. Here's a cool navbar!

Flying Gradients

You can use CSS to "animate" a gradient as the user scrolls down.

Animate on Scroll

This Javascript library lets you enable CSS animations only when they get into the viewport.

Scroll Buttons

Here are 10 cool HTML and CSS-only scroll buttons.

If you found this list useful, please follow me here.

Have a great day! ☺️


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK