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

Разместил / Просмотров: 42 127 / комментариев 8

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

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

 

  • Dmitry Romma

    а как сделать так, чтобы прокрутка этого блока начиналась не от левого края страницы, а например от левого края того элемента, в котором содержится этот блок? если я offset-у задаю значение 1, ничего не меняется.

  • Извините, но я ничего не понял, что Вы имеете ввиду.

  • Dmitry Romma

    я, не в то место комментарий вставил, извините.

  • Елена

    Здравствуйте! Спасибо за отличный материал! Но как всегда есть проблема с некоторыми браузерами. На удивление эксплорер нормально себя повел. Но проблема образовалась в мозиле. Блоки, к которым был применен post просто не отображаются. Подскажите, пожалуйста, как вы решили эту проблему?

  • Здравствуйте, скорее всего классы какие то конфликтуют, попробуйте их поменять.

  • Евгений

    На мобильных устройствах не срабатывает, в результате чего пустой фон по размерам DIVов. Как зафиксить?

  • Наверное попробовать использовать другой плагин, или обратиться к разработчику этого

  • Valentyna Levchenko

    Здравствуйте! целый день не понимала почему не работает моя анимация. Только сейчас разобралась — в статье подключение jQuery-viewport-checker происходило старой версией файла.Скопировала ссылку на подключение скрипта , вместо того чтоб скопировать ее с гита в котором и качала сам скрипт . Если помогу предшественникам — буду только рада, потому что такая маленькая ошибка может затянуть целый день.

    Нужно быть очень внимательным. Статья крутая! Спасибо!