jquery.cntl.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. (function($) {
  2. $.fn.cntl = function( options ) {
  3. /* default settings */
  4. var settings = $.extend({
  5. revealbefore : 200, /* this is the amount of "scroll padding" to allow (the more, the later the state will be revealed) */
  6. anim_class : 'cntl-animate', /* the anim class, this class should have animation rules in css */
  7. onreveal : null /* a callback once the state has been revealed */
  8. }, options);
  9. return this.each( function() {
  10. var statelist = $(this).find('.cntl-state');
  11. var bar_fill = $(this).find('.cntl-bar-fill');
  12. var states = [];
  13. var tbf = 0;
  14. function setupElements( )
  15. {
  16. for (var i = 0; i < statelist.length; i++) {
  17. states[i] = {};
  18. states[i]['top'] = $(statelist[i]).offset().top + settings.revealbefore;
  19. states[i]['elm'] = $(statelist[i]);
  20. };
  21. revealElements();
  22. }
  23. function revealElements( )
  24. {
  25. var windowtop = $(window).scrollTop();
  26. var windowbtm = windowtop + $(window).height();
  27. for( var i = 0; i < states.length; i++) {
  28. if( states[i].top > windowtop && states[i].top < windowbtm )
  29. {
  30. if (
  31. !states[i].elm.hasClass( settings.anim_class ) &&
  32. $.isFunction( settings.onreveal ) )
  33. {
  34. settings.onreveal.call( this, states[i].elm );
  35. }
  36. states[i].elm.addClass( settings.anim_class );
  37. var h = states[i].elm.position().top;
  38. if( h > tbf )
  39. {
  40. tbf = h;
  41. }
  42. bar_fill.height( tbf );
  43. }
  44. };
  45. }
  46. $(window).on('scroll',revealElements);
  47. $(window).on('load',setupElements)
  48. });
  49. }
  50. }(jQuery));