Smart Scroll

Installation

Get started with Smart Scroll in 4 easy steps!

Step 1 - Include CSS

Add the wolf css file to the <head> of your document.

<link rel="stylesheet" href="files/css/smartscroll.css" />

Step 2 - Include JS

Add the javascript/jQuery files in the footer of your document. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us.

Smart Scroll also uses the tweenmax library for smooth animations.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='tweenMax.js'></script>
<script type='text/javascript' src='jquery.smartscroll.min.js'></script>

Step 3 - Add HTML markup

Make sure to use this html markup. Start with a single container element
<div class="smartscroll-grid">
Continue to add your different items. It is important to use classes smartscroll-item.

You can now place any type of content to your item.
Note that dynamic content could lead to some issues.

<div class="smartscroll-grid">

  <div class="smartscroll-item">
    ... YOUR CONTENT
  </div>
  
   <div class="smartscroll-item">
    ... YOUR CONTENT
  </div>
  
  <div class="smartscroll-item">
    ... YOUR CONTENT
  </div>
  
</div>

You can of course use custom name for smartscroll-grid

Do not change the classes smartscroll-item because it is targeted.

Step 4 - Call the wolf script

Lastly, call the wolf initialiser on your javascript file or in the <head> of your document.

jQuery(window).load(function($) {
  jQuery('.smartscroll-grid').smartscroll();
});

How the script works

The script will go through all of your items and move/wrap them into columns depending the colum option you choosed. So let's say you have a 2 column option, the script will wrap all odd-numbered items (first,third,fifth,...) into the first column, and all others into the second column.

To have a nice "scroll" effect, your columns need to have different heights. Kind of logic, isn't it? So it's up to you to manage this. One way is to have different heights for your items. Another way is to use an odd-numbered amount of items (for example 9 items, you will have 5 items on the first column and just 4 on the second).

It's also important that the smallest column is higher than the actual screen height.

Options

See here the list of all script options which you can call by initialising the plugin

columns

Type: number
Value: 2,3,4
Default: 2

The number of columns you would like to have. Minimum is 2.

offsettop

Type: string
Value: px, id
Default: false

Add a top offset if you want the scroll effect to start earlier. Good if you have some fixed elements on the top.
Add a px value (example: "60px") or an id selector (example: "#header"). When using an id selector it will take the height of this element.

offsetbottom

Type: string
Value: px, id
Default: false

Add a bottom offset if you want the scroll effect to stop later.
Add a px value (example: "60px") or an id selector (example: "#header"). When using an id selector it will take the height of this element.

breakpoint

Type: number
Vaue: 1,...,2560
Default: 768

This is the breakpoint where the smart scroll efect will be disabled and renitialized to normal.



Example:

jQuery('.smartscroll-grid').wolf({
  columns: 2,
  offsettop: "#header"
});

You can also call the options via the data attribute on the wolf container element. Note that this will overwrite the options called on the initialiser via javascript.

<div class="smartscroll-grid" data-columns="2" data-offsettop="60px">