Подгрузка блоков в зависимостити от прокрутки страницы jQuery

На многих сайтах можно увидеть красивые эффекты появления блоков, в зависимости от прокрутки мыши по странице. Их можно задавать на любой блок в сайте, что делает его более привлекательным.

Сразу скажу, что вариант, который я предлагаю работает на cherry.lazy-load.js без использования ajax подгрузки контента. Данный скрипт нужен для эффекта плавного появления блоков, который часто используется в лэндингах.

Как вы видите из демонстрации, скрипт способен отображать блоки с разной скоростью и временем задержки. Чтобы пример из архива заработал, распакуйте его и запустите index.html

Установка:

1. В скачанном архиве подключаем на свой сайт файлы: lazy-load.css, cherry.lazy-load.js и jquery-1.9.1.min.js (если нет библиотеки jQuery).
2. В блок, где нужен эффект ставим class="lazy-load-box" data-delay="0" data-speed="400". Именно по классу lazy-load-box скрипт понимает, что нужно добавить эффект планого появления на элементе.

Где:

• data-delay - через сколько начать показывать блок (за счет этого можно грузить блоки по-очереди) в миллисек.
• data-speed - скорость анимации в миллисек.
• класс - можно совмещать с другими (своими) классами, просто подписав его в блоке

Важное замечание. Эффект cherry lazy-load может заменять стандартные css на свои если они прописаны напрямую в <style></style> тега - поэтому стили лучше добавлять в классы.

Используйте данный плагин на здоровье и пускай он сделает ваши сайты красивее.