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

Разместил / Просмотров: 73 421 / комментариев 10

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

Огромное спасибо http://www.web2feel.com

Демо Ι Скачать

HTML

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

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

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

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

<link rel="stylesheet" type="text/css" href="animate.css" />
<script src="viewportchecker.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Библиотека jQuery -->

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

<div class="container">
<div class="post"> <!-- Контент размещается тут --> </div>
<div class="post"> <!-- Контент размещается тут --> </div>
<div class="post"> <!-- Контент размещается тут --> </div>
<div class="post"> <!-- Контент размещается тут --> </div>
<div class="post"> <!-- Контент размещается тут --> </div>
<div class="post"> <!-- Контент размещается тут --> </div>
</div>

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

CSS

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

.hidden{
opacity:0;
}
.visible{
opacity:1;
}

jQuery

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

jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});
});

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

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