PageRenderTime 57ms CodeModel.GetById 29ms RepoModel.GetById 0ms app.codeStats 0ms

/js/eskju.jquery.scrollflow.js

https://gitlab.com/hvicente/dcs
JavaScript | 187 lines | 129 code | 30 blank | 28 comment | 11 complexity | 1cbe22380a120f536ad2ea290edeacd9 MD5 | raw file
  1. /*
  2. * jQuery ScrollFlow plugin
  3. *
  4. * Copyright (c) 2015 Christian Witte
  5. * licensed under MIT license.
  6. *
  7. * https://github.com/eskju/eskju-jquery-scrollflow
  8. *
  9. * Version: 1.0.0
  10. *
  11. * Licensed under MIT license.
  12. * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  13. * and associated documentation files (the "Software"), to deal in the Software without restriction,
  14. * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
  15. * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
  16. * subject to the following conditions:
  17. * The above copyright notice and this permission notice shall be included in all copies or substantial
  18. * portions of the Software.
  19. *
  20. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
  21. * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  22. * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  23. * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  24. * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  25. */
  26. $( document ).ready( function()
  27. {
  28. new ScrollFlow();
  29. });
  30. $.fn.ScrollFlow = function( options )
  31. {
  32. new ScrollFlow( options );
  33. }
  34. ScrollFlow = function( options )
  35. {
  36. this.init( options );
  37. }
  38. $.extend( ScrollFlow.prototype,
  39. {
  40. init : function( options )
  41. {
  42. this.options = $.extend(
  43. {
  44. useMobileTimeouts: true, // not supported yet
  45. mobileTimeout: 100, // not supported yet
  46. durationOnLoad: 0,
  47. durationOnResize: 250,
  48. durationOnScroll: 500
  49. }, options );
  50. this.lastScrollTop = 0;
  51. this.bindScroll();
  52. this.bindResize();
  53. this.update( this.options.durationOnLoad );
  54. },
  55. bindScroll : function()
  56. {
  57. var $this = this;
  58. $( window ).scroll( function()
  59. {
  60. $this.update();
  61. });
  62. $( window ).bind( "gesturechange", function()
  63. {
  64. $this.update();
  65. });
  66. },
  67. bindResize: function()
  68. {
  69. var $this = this;
  70. $( window ).resize( function()
  71. {
  72. $this.update( $this.options.durationOnResize );
  73. });
  74. },
  75. update: function( forcedDuration )
  76. {
  77. var $this = this;
  78. winHeight = $( window ).height();
  79. scrollTop = $( window ).scrollTop();
  80. $( ".scrollflow" ).each( function( key, obj )
  81. {
  82. objOffset = $( obj ).offset();
  83. objOffsetTop = parseInt( objOffset.top );
  84. // request object settings
  85. effectDuration = $this.options.durationOnScroll;
  86. effectDuration = typeof( forcedDuration ) != "undefined" ? forcedDuration : effectDuration;
  87. effectiveFromPercentage = ( !isNaN( parseInt( $( obj ).attr( "data-scrollflow-start" ) / 100 ) ) ? parseInt( $( obj ).attr( "data-scrollflow-start" ) ) / 100 : -0.25 );
  88. scrollDistancePercentage = ( !isNaN( parseInt( $( obj ).attr( "data-scrollflow-distance" ) / 100 ) ) ? parseInt( $( obj ).attr( "data-scrollflow-distance" ) ) / 100 : 0.5 );
  89. effectiveFrom = objOffsetTop - winHeight * ( 1 - effectiveFromPercentage );
  90. effectiveTo = objOffsetTop - winHeight * ( 1 - scrollDistancePercentage );
  91. // end object settings
  92. parallaxScale = 0.8;
  93. parallaxOpacity = 0;
  94. parallaxOffset = -100;
  95. factor = 0;
  96. if( scrollTop > effectiveFrom )
  97. {
  98. factor = ( scrollTop - effectiveFrom ) / ( effectiveTo - effectiveFrom );
  99. factor = ( factor > 1 ? 1 : factor );
  100. }
  101. options = {
  102. opacity: 1,
  103. scale: 1,
  104. translateX: 0,
  105. translateY: 0
  106. };
  107. if( $( obj ).hasClass( "-opacity" ) )
  108. {
  109. options.opacity = 0 + factor;
  110. }
  111. if( $( obj ).hasClass( "-pop" ) )
  112. {
  113. options.scale = 0.8 + factor * 0.2;
  114. }
  115. if( $( obj ).hasClass( "-slide-left" ) )
  116. {
  117. options.translateX = ( -100 + factor * 100 ) * -1;
  118. }
  119. if( $( obj ).hasClass( "-slide-right" ) )
  120. {
  121. options.translateX = ( -100 + factor * 100 );
  122. }
  123. if( $( obj ).hasClass( "-slide-top" ) )
  124. {
  125. options.translateY = ( -100 + factor * 100 ) * -1;
  126. }
  127. if( $( obj ).hasClass( "-slide-bottom" ) )
  128. {
  129. options.translateY = ( -100 + factor * 100 );
  130. }
  131. $( obj ).css({
  132. webkitFilter: "opacity(" + options.opacity + ")",
  133. mozFilter: "opacity(" + options.opacity + ")",
  134. oFilter: "opacity(" + options.opacity + ")",
  135. msFilter: "opacity(" + options.opacity + ")",
  136. filter: "opacity(" + options.opacity + ")",
  137. webkitTransform: "translate3d( " + parseInt( options.translateX ) + "px, " + parseInt( options.translateY ) + "px, 0px ) scale(" + options.scale + ")",
  138. mozTransform: "translate3d( " + parseInt( options.translateX ) + "px, " + parseInt( options.translateY ) + "px, 0px ) scale(" + options.scale + ")",
  139. oTransform: "translate3d( " + parseInt( options.translateX ) + "px, " + parseInt( options.translateY ) + "px, 0px ) scale(" + options.scale + ")",
  140. msTransform: "translate3d( " + parseInt( options.translateX ) + "px, " + parseInt( options.translateY ) + "px, 0px ) scale(" + options.scale + ")",
  141. transform: "translate3d( " + parseInt( options.translateX ) + "px, " + parseInt( options.translateY ) + "px, 0px ) scale(" + options.scale + ")",
  142. transition: "all " + effectDuration + "ms ease-out"
  143. });
  144. });
  145. return;
  146. // TODO: Timeout for mobile devices
  147. if( this.options.useMobileTimeouts && this.lastScrollTop != scrollTop )
  148. {
  149. this.lastScrollTop = scrollTop;
  150. $( "body" ).stop();
  151. $( "body" ).animate({ float: "none" }, this.options.mobileTimeout, function()
  152. {
  153. $this.update();
  154. });
  155. }
  156. }
  157. });