插件 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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了