scrollorama

Автор: John Polacek

Плагин jQuery для создания эффектов при прокручивании содержания

Трансформации

Проявление

Перемещение

Вращение

Масштабирование

Любые числовые свойства CSS

Фиксируем

★ Затем отпускаем ★

Параллакс

Параллакс

Параллакс

Как использовать

Примечание: данный проект является экспериментальным и не проходил серьезного тестирования.

Разрабатываем сайта и разделяем содержание на блоки.

★ ★ ★

Подключаем scrollorama.js после jQuery и инициализируем плагин, передав селектор классов блоков в качестве параметра.

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

★ ★ ★

Указываем элемент и анимируем его свойства.

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

Параметрами анимации могут быть:

★ ★ ★

Возвратная функция для события onBlockChange.

scrollorama.onBlockChange(function() {
    alert('Вы только что прокрутили блок #'+scrollorama.blockIndex);
});