Как сделать анимацию при прокрутке страницы для блока с помощью JQuery и CSS
95 385 любопытных
Я уверен, что Вам встречались такие сайты, на которых при прокрутке страницы вниз дополнительный контент, а именно блоки, подгружались с красивыми и плавными эффектами. Оказывается подобное очень просто делается с помощью простого скрипта и нескольких правил 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, который добавляет красивую анимацию при появлении. Вот и весь секрет :)
Надеюсь Вам понравился данный урок. Пока :)
