jQuery

【jQuery】スクロールするときに関数をトリガするGScroll

March 12, 2017
GScroll

GScrollは、DOMにスクロールするときに関数をトリガする軽量のJavaScriptツール

Getting started

CDN

https://cdn.rawgit.com/GA-MO/g-scroll/3dede7c2/lib/g-scroll.js

Properties

selector: '.element',           // Class name for trigger
offset: 10,                     // Offset point for trigger
delay: 0.5,                     // Time delay before call action
action: function(selector) {

    // this function will trigger when DOM in viewpoit
    // (selector) is current DOM in viewpoit
    // can use (selector) make a great thing with your favorite lib.

}

Example

// Set up properties
var dataScroll = [
    {
        selector: '.element1',
        offset: 10,
        delay: 0.5,
        action: function(selector) {
            TweenMax.from(selector, 0.3, { y:100, opacity: 0 });
        }
    },
    {
        selector: '.element2',
        offset: 10,
        delay: 0.5,
        action: function(selector) {
            alert('Trigger me');
            $(selector).addClass('animated');
        }
    }
];

// Use
GScrolling(dataScroll);

MIT