jQuery Plugin To Add CSS3 Scrolling Effects On Your Web Page - Smoove

Smoove is a lightweight jQuery plugin for adding amazing CSS3 based scrolling effects to Html elements as you scroll down the page. By adding data-EFFECT attributes to your Html elements, the Smoove plugin can scale, rotate, fade, move, skew elements when they're scrolled into view.

See also:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• Animate Elements In When They Come Into View - jQuery CSS3 Animate It Plugin
• jQuery Plugin For Simple Html Element Scrolling Effects - scrollme

How to use it:

1. Load the jQuery javascript library and the jQuery smoove plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/jquery.smoove.js"></script>

2. Add data-EFFECT attributes to elements you wish to animate. Effects supported:

• Fade (Default)
• Move
• Rotate
• Scale
• Skew

<div class="block"></div>

<div class="block" data-move-y="200px" data-move-x="-200px"></div>

<div class="block" data-rotate-x="90deg" data-move-z="-500px" data-move-y="200px"></div>

<div class="block" data-scale="0.2" data-skew="90deg,90deg"></div>

3. Initialize the plugin to active the scrolling effects.

$('.block').smoove();

4. Available settings.

$('.block').smoove({
  offset: 150,
  opacity: 0,
  transition: "all 1s ease, opacity 1.5s ease",
  transformStyle: 'preserve-3d',
  transformOrigin: false,
  perspective: 1000,
  min_width: 768,
  min_height: false
});

Change log:

2017-07-09

• Recalculate offset on orientationchange event and improve scroll throttle

2017-07-07

• Add min_width & min_height params and minor cleanup

2016-08-08

• JS update

---

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