Анимация при прокрутке страницы для блока с помощью JQuery и CSS


Анимация при прокрутке страницы

Анимация при прокрутке страницы для блока с помощью JQuery и CSS

Я уверен, что Вам встречались такие сайты, на которых срабатывает анимация при прокрутке страницы вниз дополнительный контент, а именно блоки, подгружались с красивыми и плавными эффектами. Оказывается подобное очень просто делается с помощью простого, скрипта и нескольких правил CSS. В демо будет несколько эффектов загрузки, которые Вы можете выбрать для своего сайта.

HTML

Чтобы такая анимация работала, нам нужно прикрепить фреймворк CSS анимации, и простой JQuery скрипт.

Animate.css — замечательная библиотека разнообразных CSS анимаций. Это даёт нам просто выбрать нужную анимацию просто добавив нужный класс.

JQuery Viewport Checker — отличный небольшой скрипт, который проверяет используется ли элемент в окне просмотра браузера, и если он используется тогда скрипт добавляет ему нужный класс.

Теперь нам нужно библиотеку CSS и скрипт прикрепить к сайту, делается это с помощью добавления кода в шапку сайта:

А теперь давайте посмотрим как выглядит сама структура подгружаемых блоков в HTML:

 

Как видите, что код очень простой.

CSS

Таким образом у нас получилась страница, на которой расположено несколько блоков, которые должны при прокрутке вниз плавно подгружаться. Теперь нам нужно придумать 2 класса CSS, которые будут работать если один из блоков окажется в видимом поле браузера:

 

jQuery

Теперь нам нужно добавить скрипт JQuery, который запустить весь этот не сложный двигатель. Вот именно в этом коде мы будем использовать тот класс который отвечает за один из многих типов анимации в Animate.css, например это будет fadeIn, соответственно код будет иметь такой вид:

 

Работает данный скрипт следующим образом: если наш блок находится в невидимом поле браузера ему присваивается класс hidden, который скрывает наш блок, после того как наш блок только доходит видимой части окна ему тут же присваивается класс visible вместе с классом от Animate.css, который добавляет красивую анимацию при появлении. Вот и весь секрет 🙂

Надеюсь Вам понравился данный урок. Пока 🙂

Previous Создаем слайдер для сайта с эффектом 3D
Next Адаптивные и бесплатные шаблоны в HTML и в Flat стиле

Suggested Posts

MooBoo — шаблон интернет-магазина моды OpenCart

Атрибуты товара на странице категории Opencart

Крутые шрифты для логотипов, иконки, шаблоны и не только за ноябрь 2016

YML импорт экспорт Яндекс Маркет для OpenCart 2

Эффект пульсирующей иконки для сайта на CSS3

WordPress шаблоны бесплатно — подборка за 2017 год