Giter Club home page Giter Club logo

jquery.scrollfire's Introduction

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

jquery.scrollfire's People

Contributors

xaxis avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.