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

jQuery Plugin To Add CSS3 Scrolling Effects On Your Web Page - Smoove
File Size: 24.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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


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