阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.scrollfire 中文API文档

      插件 jQuery.scrollfire 中文API文档 https://github.com/Xaxis/jquery.scrollfire

      jQuery Scrollfire

      Version 1.4.0

      Summary

      Allows useful callbacks to be fired upon elements scrolling into and out of view from both the top and bottom of the viewport/window. Additionally, provides a mechanism to animate parallax elements.

      Author

      Wil Neeley ( @wilneeley / trestlemedia.net / github.com )

      Overview

      jQuery.scrollfire gives its users the ability to execute callbacks on a multitude of scroll based events.

      • … implement way points to trigger menu animations.
      • … easily animate elements with parallax effects.
      • … add infinite scrolling via ajax to load content at set scroll positions.
      • … call functions when elements scroll into and/or out of view.
      • … call functions when elements scroll COMPLETELY into/out of view.
      • … call functions based on scroll direction ONLY when an element is in view.
      • … call functions based on scroll direction continuously.
      • … call functions at any scroll position.

      Usage

      Include jquery.scrollfire.min.js after jQuery.

      Initializing Scrollfire

      // Example of initializing scrollfire with all of its callbacks and most of its properties
      $('.container').scrollfire({
      
          // Offsets
          offset: 0,
          topOffset: 150,
          bottomOffset: 150,
      
          // Fires once when element begins to come in from the top
          onTopIn: function( elm, distance_scrolled ) {
              $(elm).animate({opacity: 1.0}, 500);
              $(elm).removeClass('fully-visible');
              $(elm).find('.parallax-cell').html('onTopIn');
          },
      
          // Fires once when element beings to go out at the top
          onTopOut: function( elm, distance_scrolled ) {
              $(elm).animate({opacity: 0.2}, 500);
              $(elm).removeClass('fully-visible');
              $(elm).find('.parallax-cell').html('onTopOut');
          },
      
          // Fires once when element begins to come in from the bottom
          onBottomIn: function( elm, distance_scrolled ) {
              $(elm).animate({opacity: 1}, 500);
              $(elm).removeClass('fully-visible');
              $(elm).find('.parallax-cell').html('onBottomIn');
          },
      
          // Fires once when element begins to go out at the bottom
          onBottomOut: function( elm, distance_scrolled ) {
              $(elm).animate({opacity: 0.2}, 500);
              $(elm).removeClass('fully-visible');
              $(elm).find('.parallax-cell').html('onBottomOut');
          },
      
          // Fires once when element goes completely out of view at the top
          onTopHidden: function( elm ) {
              $(elm).removeClass('fully-visible').addClass('fully-hidden');
              $(elm).find('.parallax-cell').html('onTopHidden');
          },
      
          // Fires once when element completely comes into view from the bottom
          onBottomVisible: function( elm ) {
              $(elm).removeClass('fully-hidden').addClass('fully-visible');
              $(elm).find('.parallax-cell').html('onBottomVisible');
          },
      
          // Fires once when element goes completely out of view at the bottom
          onBottomHidden: function( elm ) {
              $(elm).removeClass('fully-visible').addClass('fully-hidden');
              $(elm).find('.parallax-cell').html('onBottomHidden');
          },
      
          // Fires once when element completely comes into view from the top
          onTopVisible: function( elm ) {
              $(elm).removeClass('fully-hidden').addClass('fully-visible');
              $(elm).find('.parallax-cell').html('onTopVisible');
          },
      
          // Fires continuously while scrolling in either direction while element is in at least partial view
          onScroll: function( elm, distance_scrolled ) {
          },
      
          // Fires continuously while scrolling down and while the element is in at least partial view
          onScrollDown: function( elm, distance_scrolled ) {
          },
      
          // Fires continuously while scrolling up and while the element is in at least partial view
          onScrollUp: function( elm, distance_scrolled ) {
          },
      
          // Fires continuously while scrolling in either direction regardless of if the element is in view
          onScrollAlways: function( elm, distance_scrolled ) {
          },
      
          // Fires continuously while scrolling down regardless of if the element is in view
          onScrollDownAlways: function( elm, distance_scrolled ) {
          },
      
          // Fires continuously while scrolling up regardless of if the element is in view
          onScrollUpAlways: function( elm, distance_scrolled ) {
          }
      });
      
      // Example of parallaxing an element within its parent container (default behavior)
      $('.parallax-cell-1').scrollfire({
          parallax: {
              active: true,
              parent: $('.parallax-cell-1').parent()
          }
      });
      
      
      // Example of using parallaxed element that respects its margins as a boundary
      $('.parallax-cell-2').scrollfire({
          parallax: {
              active: true,
              bound: true,
              speed: 150,
              easing: 'linear'
          }
      });
      
      
      // Example of inverting a parallax element's direction
      $('.parallax-cell-3').scrollfire({
          parallax: {
              active: true,
              bound: false,
              invert: true,
              speed: 150,
              easing: 'linear'
          }
      });
      
      
      // Example of adjusting the parallax speed and easing
      $('.parallax-cell-4').scrollfire({
          parallax: {
              active: true,
              bound: false,
              invert: false,
              speed: 500,
              easing: 'swing'
          }
      });
      
      
      // Example of adjusting the parallax distance by a scalar multiplier
      $('.parallax-cell-5').scrollfire({
          parallax: {
              active: true,
              bound: false,
              invert: false,
              speed: 10,
              easing: 'linear',
              scalar: 0.25
          }
      });
      
      
      // Parallax multiple elements (active is the only required property)
      $('.parallax-cell-6, .parallax-cell-7, .parallax-cell-8, .parallax-cell-9').scrollfire({
          parallax: {
              active: true
          }
      });
      

      Using Scrollfire Methods

      // Remove an element(s) from scrollfire.
      $('.parallax-cell').scrollfire('remove');
      

      Caveats

      None reported/observed. Have fun.

      Requirements/Browsers

      Tested with jQuery 1.4.x.

      Works in IE6+, Chrome 14+, Safari 4+, Firefox 3.0+, Opera 10+.

      Examples

      See example.html in examples folder.

      Changelog

      Version 1.0.0

      • initial version

      Version 1.1.0

      • added parallax scrolling methods: onScrollDown, onScrollUp, and onScroll

      Version 1.2.0

      • added immediate parallax initialization

      Version 1.3.0

      • added parallax bounding functionality

      Version 1.4.0

      • refined scrollfire methods
      • added parallax speed, easing, invert, scalar, and active properties
      目录
      目录