jQuery Plugin For CSS & Easing Based Scroll Animations - circus-scroll-tween
File Size: | 13.1 KB |
---|---|
Views Total: | 4174 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

circus-scroll-tween is a simple to use jQuery plugin which applies custom CSS styles and easing effects to any DOM elements depending on their scroll position.
How to use it:
1. Include jQuery JavaScript library and the jQuery circus-scroll-tween plugin's script at the bottom of your html page.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="js/circus-scroll-tween.min.js"></script>
2. Initialize the plugin and we're ready to go.
$('html').csInit({ // global settings wheelDelay: 300, wheelDistance: 100, wheelEase: 'easeOutQuad' });
3. The sample JavaScript to animate an element as it becomes visible and disappear on scroll.
$('.anim1').csTween({ // begin / end scroll position begin: 0, end: 300, // custom CSS classes from: { letterSpacing: '0', opacity: '1' }, to: { letterSpacing: '2vw', opacity: '0' }, // easing effect easing: 'easeOutExpo', // callbacks onStart: function(el){ //console.log('onStart'); }, onProgress: function(el,p){ //console.log(p); }, onComplete: function(el){ //console.log('onComplete'); $(el).hide(); }, onReverseStart: function(el){ //console.log('onReverseStart'); $(el).show(); }, onReverseComplete: function(el){ //console.log('onReverseComplete'); } });
4. API methods.
// scrolls to a specific position $().csGoTo({ scrollPos: 500, // pixels duration: 500, easing: 'easeOutQuad' }); $().csGoTo({ scrollPos: 'end', // scrolls to end of document duration: 1000, easing: 'easeOutQuad' }); // returns current scroll position var scrollTop = $().csGetScrollTop(); // destroy the plugin $().csDestroy();
Change log:
2016-12-09
- js clean up.
2016-09-09
- Mac scroll fix, BackgroundPositionY and BackgroundPositionX fixed (firefox)
2016-09-02
- Added a method '$().csGoTo();' that scrolls to defined position.
- Added '$().csGetScrollTop();' method.
2016-09-01
- Added a method '$().csDestroy();' to remove all scroll tweens and mouse wheel events.
This awesome jQuery plugin is developed by ZbigiMan. For more Advanced Usages, please check the demo page or visit the official website.