If you decide to take the plunge, consider this snippet. But go too far and it becomes more like an online circus act. When tastefully done, it can bring attention to each section. See the Pen Side Scrolling from jInvertScroll by SitePoint Animate on Scroll by SnikĪmong the bigger trends these days is animating content as it comes into the viewport. It utilizes a script called jInvertScroll, which turns your site into a side-scroller, complete with parallax effects. But what if you didn’t want a horizontal scroll bar? In that case, you’d need something like this example. Have you ever wanted your website to scroll horizontally instead of vertically? You can do that without any fancy scripts, of course. See the Pen Changing background-color while scrolling version 2 by JP Nothard Turning Vertical into Horizontal by SitePoint You might also want to check out a script that does the same thing, but with gradients. 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). 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. See the Pen Sticky Slider Navigation (Responsive) by Ettrics Flying Colors by JP Nothard The top navigation automatically highlights the current content section and allows users to quickly switch between them. This time, it’s fine-tuned for a one-page site. Here’s another take on the sticky header. See the Pen Scroll Header by Blake Bowen Slide to the Right by Ettrics As per usual, this example shrinks into a more compact element as you scroll down the page. 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. Why? They can add a ton of user convenience. Sticky headers like this one have become a staple over the years. See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan The Incredible Shrinking Header by Blake Bowen It’s not right for every situation, but there are times when it makes sense. With that, small items like this animated scroll icon let users know that yes, there is more content down below. So often, designers utilize full-screen background images and other elements that may make scrolling ambiguous to the user. Okay, this snippet isn’t necessarily an effect on its own. See the Pen CSS only scroll indicator by Mike You Can Scroll If You Want To by Ryan Mulligan They communicate how far a user is into a story in an easy-to-digest method. Scroll indicators have become very popular on content-heavy websites. It uses CSS IDs coupled with jQuery to make the navigation work.ĭemo:CSS scroll down button by Naoya All Indications Say You’re Scrolling by MadeByMike 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. Modern webpages are often broken down into multiple content sections – each with its own distinct elements.
0 kommentar(er)
