Stroll.js - Cool Scroll effects with jQuery and CSS3

Stroll.js - Cool Scroll effects with jQuery and CSS3
File Size: 19.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The Stroll is a collection of 12+ CSS3 powered scroll effects for long html lists: grow, cards (CSS 3D), curl (CSS 3D), wave, flip (CSS 3D), fly (CSS 3D), simplified fly (CSS 3D), reverse fly (CSS 3D), skew, helix (CSS 3D), fan, tilt, papercut, zipper, fade, twirl (CSS 3D), and more.

Works in browsers with support for CSS 3D transforms including a special touch-enabled mode for iOS & Android.

Currently works as a Vanilla JavaScript library and without any dependencies (jQuery).

How To Use:

1. Include the stroll.js library on the page.

<script src="js/stroll.min.js"></script>

2. Create a regular unordered or ordered list for the dropdown.

<ul class="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  ...
</ul>

3. Add an animation class of choice to the list. Available animations:

  • Grow: .grow
  • Cards (CSS 3D): .cards
  • Curl (CSS 3D): .curl
  • Wave: .wave
  • Flip (CSS 3D): .flip
  • Fly (CSS 3D): .fly
  • Simplified Fly (CSS 3D): .fly-simplified
  • Reverse Fly (CSS 3D): .fly-reverse
  • Helix (CSS 3D): .helix
  • Fan: .fan
  • Papercut: .papercut
  • Twirl (CSS 3D): .twirl
<ul class="myList grow">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  ...
</ul>

4. Initialize the Stroll.js on the html list and done.

stroll.bind( 'ul' );

This awesome jQuery plugin is developed by hakimel. For more Advanced Usages, please check the demo page or visit the official website.