scrollorama

created by John Polacek Follow @johnpolacek


适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。

Transitions

Fade In

Fly In

Rotate In

Zoom In

Any numeric CSS property

Pin It

★ Then unpin it ★

Parallax

Parallax

Parallax

Easing

How To Use

Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested.

Design and build your site, dividing your content into blocks.

★ ★ ★

Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});

★ ★ ★

Target an element and animate its properties.

scrollorama.animate('#example1',{
    duration:400, property:'opacity'
})

The animation parameters you can use are:

★ ★ ★

Hook into the onBlockChange event.

scrollorama.onBlockChange(function() {
    alert('You just scrolled to block#'+scrollorama.blockIndex);
});

★ ★ ★

Note: If you are not using the pinning feature, it is recommended you disable it. Pinning requires scroll blocks to be converted to absolute positioning, which can break some layouts.

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        enablePin:false
    });
});

Credits

scrollorama by John Polacek

Lettering.js by Dave Rupert

Bowlby One SC Font by Vernon Adams

★ ★ ★

来源:站长素材