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

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

537

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

Сразу скажу, что вариант, который я предлагаю работает на 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> тега - поэтому стили лучше добавлять в классы.

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

| | Подгрузка блоков в зависимостити от прокрутки страницы jQuery | На многих сайтах можно увидеть красивые эффекты появления блоков, в зависимости от прокрутки мыши по странице. Их можно задавать на любой блок в сайте | http://blogprogram.ru/wp-content/uploads/2016/12/537-131x131.jpg