jScrollability

This jQuery plugin helps you build single-scroll pages with complex scroll-based animations. Performance focused and mobile ready.

Scroll down to see more

Download Minified JS Download Standard JS

View on GitHub

Slide elements in

HTML

<section class="section section-1">
    <h3 class="slide-in-demo">Slide elements in</h3>
</section>

CSS

.section-1 .slide-in-demo {
    position: absolute;
    top: 15%;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 4em;
}

JS

(function($) {
    $(document).ready(function() {
        $.jScrollability([
            {
                'selector': '.slide-in-demo',
                'start': 'parent',
                'end': 'parent',
                'fn': {
                    'left': {
                        'start': 100,
                        'end': 0,
                        'unit': '%'
                    }
                }
            }
        ]);
    });
})(jQuery);

Reveal From Bottom

HTML

<section class="section section-2">
    <h3 class="reveal-demo">Reveal From Bottom</h3>
</section>

CSS

.section-2 .reveal-demo {
    position: absolute;
    top: 0%;
    width: 100%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 4em;
}

JS

(function($) {
    $(document).ready(function() {
        $.jScrollability([
            {
                'selector': '.reveal-demo',
                'start': 'parent',
                'end': 'parent',
                'fn': {
                    'top': {
                        'start': 100,
                        'end': 15,
                        'unit': '%'
                    }
                }
            }
        ]);
    });
})(jQuery);

Even reveal whole spans of text within long paragraphs while the user scrolls with jScrollability.

HTML

<section class="section section-3">
    <p class="text-wrapper">
        <span>Even reveal</span> <span>whole spans</span> <span>of text</span> <span>within</span> <span>long paragraphs</span> <span>while the user</span> <span>scrolls</span> <span>with jScrollability.</span>
    </p>
</section>

CSS

.section-3 .text-wrapper {
    max-width: 600px;
    margin: auto;
    font-size: 2em;
    line-height: 1.5em;
    margin-top: 4%;
    
}

.section-3 .text-wrapper span {
    opacity: 0;
    -webkit-transition: opacity 0.2s;
}

.section-3 .text-wrapper span.visible {
    opacity: 1;
}

JS

(function($) {
    $(document).ready(function() {
        $.jScrollability([
            {
                'selector': '.text-wrapper',
                'start': function($el) { return $el.offset().top + $el.height() },
                'end': 'parent',
                'fn': function($el,pcnt) {
                    var $spans = $el.find('span');
                    var point = Math.floor(($spans.length+1) * pcnt);
                    $spans.each(function(i,el) {
                        var $span = $(el);
                        if (i < point) {
                            $span.addClass('visible');
                        } else {
                            $span.removeClass('visible');
                        }
                    });
                }
            }
        ]);
    });
})(jQuery);