jQuery Responsive Parallax Scrolling Framework - Cool Kitten
File Size: | 124 KB |
---|---|
Views Total: | 10027 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cool Kitten is a jQuery plugin that takes advantage of jQuery, jQuery stellar, and jQuery waypoints to build a parallax scrolling responsive framework. I recommended you checking the demo page to see how it woks.
Usage:
1. Include jQuery library and necessary javascript files on your web page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.stellar.min.js"></script> <script type="text/javascript" src="js/waypoints.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
2. The javascript
jQuery(document).ready(function ($) { $(window).stellar(); var links = $('.navigation').find('li'); slide = $('.slide'); button = $('.button'); mywindow = $(window); htmlbody = $('html,body'); slide.waypoint(function (event, direction) { dataslide = $(this).attr('data-slide'); if (direction === 'down') { $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active'); } else { $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active'); } }); mywindow.scroll(function () { if (mywindow.scrollTop() == 0) { $('.navigation li[data-slide="1"]').addClass('active'); $('.navigation li[data-slide="2"]').removeClass('active'); } }); function goToByScroll(dataslide) { htmlbody.animate({ scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top }, 2000, 'easeInOutQuint'); } links.click(function (e) { e.preventDefault(); dataslide = $(this).attr('data-slide'); goToByScroll(dataslide); }); button.click(function (e) { e.preventDefault(); dataslide = $(this).attr('data-slide'); goToByScroll(dataslide); }); });
This awesome jQuery plugin is developed by jalxob. For more Advanced Usages, please check the demo page or visit the official website.