We Be Scrollin

img-0
admin December 8, 2020 code learn post jumbotron

Yep, that’s right. Another freakin’ scroll to target deal. We Be Scrollin is a super slim (2 kbs) Jquery plugin designed to enhance single page site navigation with an animated scrolling effect. Enabled via data-attributes, the plugin provides a few options for speed, easing, offset, active class, and a completion callback.

Love em or hate em, one page scrollers can serve a purpose. Be it a marketing, promotional, or documentation site, spiffing things up with an animated scroll can enhance the overall UX. And while there’s already a few robust scrolling plugins in the wild, We Be Scrollin places an emphasis on being a stupid simple and lightweight solution.

Let’s Set Stuff Up

Set up is super simple. Just add the data-attribute data-scroll="yourID" to the link, with a corresponding unique ID on the target section. Rinse, repeat as many times as necessary. Drop in an Easing lib if you that’s your thing.

/*---------------------------  
--Link: Add 'data-scroll' to link with unique name
----------------------------- */
<a data-scroll="sect-one" href="#">Top</a>

/*---------------------------  
--Target: Apply that unique name as an id
-----------------------------  */
<section id="sect-one"></section>

Initialize it

With our nav and section ids in place, lets go ahead and initialize the badboy off the html doc.

$('html').weBeScrollin({
 offset: '40',
 addActive: 'true',
 scrollSpeed: 500,
 scrollEase: 'swing',
});
img-1

Some Options

A few essential options are available to customize things.

offset
Provides an offset from top in pixels. Required if you’re rockin a fixed nav and need to account for it’s height.

scrollSpeed
Controls the speed of the scroll animation

scrollEase
Enables scroll acceleration/deceleration easings. If you want to support additional easings, just include a lib, like this one

addActive
Adds an active class to the clicked nav item. Currently, the active class relies on a click event, so use a lib like Waypoints or Inview if true viewport detection is required. When I get some more time, I’ll circle back and write this in natively.

complete : function() {}
A callback function to trigger another function on completion of the animation. This is useful for say, closing a mobile nav or triggering another animation once you arrive.

Mobile Nav?

If you’re one page site includes a mobile nav drawer, you’re gonna want to close it after the animation stops. For example, if you have a simple mobile-nav that adds the class .js-open to push the drawer open, use the callback to remove that class and close things up (also highlighted in the demo provided below):

$('html').weBeScrollin({
 offset: '40',
 addActive: 'true',
 scrollSpeed: 500,
 scrollEase: 'easeOutBounce',
 
 complete : function() {
     $( '.mobile-nav' ).removeClass('js-open');
   },
});

Demo & Download

Here’s a little demo for ya

Download We Be Scrollin on Github 

Other posts

img-2

You’re My Eero

Read Full Article design life post jumbotron
Prev
img-3

Passing The Baton In Project Management

Read Full Article archive perspectives
Next