Запуск анимации при прокрутке css. Введение в анимации прокрутки на основе jQuery
Здравствуйте, дорогие друзья! Долго готовил материал сегодняшней статьи и постарался подать его максимально подробно. Надеюсь после прочтения у вас больше не останется вопросов о том, как делается css .
Сразу хочу предупредить: мы не будем сами писать скрипты или что-то подобное (блог ведь рассчитан на новичков, и нам необходимо, чтобы легко подключалось и безотказно работало).
Для работы нам понадобится скачать несколько инструментов.
Размер: 0.48 Мб
Скачать исходник
В первую очередь – это файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/
То есть процесс добавления анимации элементу начинается с того, что я захожу на данный ресурс и выбираю стиль анимации из предложенных вариантов. (Благо там есть из чего выбрать)
Далее необходимо подключить таблицу стилей. Для этого копируем файл animate.css в папку с таблицами стилей вашего сайта. У меня – эта папка так и называется «css». А в файле «index.html», между тегами head прописываем:
Теперь необходимо задать класс элементу, который хотим с анимировать, с соответствующим названием, которое выбрали на предыдущем шаге. То есть стиль bounceInRight, показанный на скриншоте выше – будет являться классом для элемента, который будем анимировать. А также класс animated, для того, чтобы анимация проигрывалась. Надеюсь понятно объяснил? Если нет, то на примере ниже — это предельно просто!
Например:
Теперь, при обновлении страницы будет проигрываться анимация. Можете попробовать нажав кнопку f5.
Правда круто? Но на этом процесс создания анимации не закончен, ведь нам необходимо сделать так, чтобы проигрывание анимации происходило при прокрутке страницы, а не сразу после ее загрузки!
Для этого нам придется воспользоваться готовым скриптом wow.js. Его необходимо поместить в папку js основного каталога вашего сайта. Я выложил только сжатый вариант, потому что он меньше весит и быстрее грузиться. Полностью ознакомиться с проектом можно .
Итак, для того, чтобы анимация элементов происходила при прокрутке страницы, необходимо в файл index.html, между тегами head добавить следующие 2 строки:
new WOW().init();
А также, классу bounceInRight, вместо animated необходимо добавить wow. Должно получиться следующее:
Как видите, первая анимация проигрывается сразу после загрузки страницы, а вторая, только при прокрутке, когда ее видит пользователь. В то время как первую – не заметит, если она расположена не на первом экране.
Можно сделать вывод, что процесс создания такой анимации сводиться к 5 минутам потраченного времени. Все что нужно сделать, это:
- Дописать 3 строчки кода между отрывающимся и закрывающимся тегом head.
- Скопировать файл animate.css и wow.min.js в соответствующие папки.
- Добавить класс wow и класс с названием анимации элементу, который хотим с анимировать
И все, ваш сайт будет смотреться гораздо живее и эффектнее. А в случае продажи – дороже.
Но есть дополнительные инструменты управления анимацией. У каждого элемента можно задать несколько специальных атрибутов для более тонкой настройки:
- data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
- data-wow-duration: Изменение длительности анимации;
- data-wow-delay: Задержка перед стартом анимации;
- data-wow-iteration: Сколько раз повторять анимацию?
Например так:
А на сегодня все, до встречи на smartlanding. Оставляйте свои комментарии и задавайте вопросы! Пока!
P.s.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам
Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и front-end разработчики должны быть в курсе последних тенденций в веб-дизайне. Parallax-прокрутка, фиксированные заголовки, плоский дизайн, одностраничные сайты и CSS-анимация некоторые из самых горячих веб-тенденций на текущий момент.
В этом уроке мы рассмотрим создание анимации и эффектов при прокрутке страницы с помощью CSS и jQuery.
Четыре эффекта, которые мы будем создавать можно увидеть на этой странице .
Примечание: Код, используемый в этом уроке можно было бы улучшить при помощи кэширования объектов и использования CSS анимации вместо метода jQuery "animate() ", но для простоты мы сконцентрируемся в первую очередь на идее.
Что такое анимация и эффекты при прокрутке страницы?Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.
Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll() .
После того, как мы узнаем, что пользователь прокручивает страницу, мы можем получить вертикальное положение полосы прокрутки с помощью метода scrollTop() и применить нужные эффекты:
if
($(this
)
.scrollTop
()
>
0
)
{
// создаем эффекты и анимацию
}
}
)
;
Если мы заинтересованы в создании адаптивных эффектов (оптимизированных под разные разрешения экрана), то мы должны определить следующие свойства:
- Свойство width - ширина окна браузера.
- Свойство height - высота окна браузера.
Без определения этих свойств мы создадим эффекты которые будут "статичными" и не будут работать правильно, если пользователь изменит размер окна горизонтально или вертикально.
Мы можем легко получить значения этих свойств с помощью методов width() и height() .
Следующий фрагмент кода показывает все необходимые проверки, которые мы должны принять во внимание, чтобы создать эффекты при прокрутке страницы.
$(window)
.scroll
(function
()
{
if
($(this
)
.width
()
<
992
)
{
if
($(this
)
.height
()
1000
)
{
// создаем эффекты
}
}
}
}
)
;
Теперь, когда мы рассмотрели основы создания подобных эффектов, давайте посмотрим их в действии, на четырех различных примерах.
Пример #1Этот эффект срабатывает, когда верхнее положение полосы прокрутки окна превышает 60px. В таком случае выполняется следующий фрагмент кода:
if
($(window)
.scrollTop
()
>
60
)
{
$(".banner h2"
)
.css
("display"
,
"none"
)
;
$(".banner .info"
)
.css
("display"
,
"block"
)
;
}
else
{
$(".banner h2"
)
.css
("display"
,
"block"
)
;
$(".banner .info"
)
.css
("display"
,
"none"
)
;
}
Код выше скрывает дочерний элемент h2 внутри элемента с классом .banner и показывает его дочерний элемент .info , который был первоначально скрыт.
Этот код также может быть записан следующим образом:
if
($(window)
.scrollTop
()
>
60
)
{
$(".banner h2"
)
.hide
()
;
$(".banner .info"
)
.show
()
;
}
else
{
$(".banner h2"
)
.show
()
;
$(".banner .info"
)
.hide
()
;
}
Следующий эффект зависит не только от верхней позиции полосы прокрутки браузера, но и от ширины окна. В частности, мы делаем следующие предположения:
Вышеупомянутые предположения реализованы в следующем фрагменте кода:
if
($(window)
.width
()
600
)
{
firstAnimation()
;
}
}
else
if
($(window)
.width
()
>
480
)
{
// анимация, которая должны быть выполнена
firstAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
450
)
{
// анимация, которая должны быть выполнена
firstAnimation()
;
}
}
Код, который содержит анимацию, которая будет выполнена, следующий:
var
firstAnimation =
function
()
{
$(".clients .clients-info"
)
.each
(
function
()
{
$(this
)
.delay
(500
)
.animate
({
opacity:
1
,
height:
"180"
,
width:
"250"
}
,
2000
)
;
}
)
;
}
;
Код выше анимирует свойства непрозрачности, высоту и ширину для элемента .clients-info .
Пример #3Третий эффект зависит также от верхней позиции полосы прокрутки окна и от ширины окна. В частности, мы делаем следующие предположения:
И вот код:
if
($(window)
.width
()
1750
)
{
secondAnimation()
;
}
}
else
if
($(window)
.width
()
>
549
&
amp;&
amp;
$(window)
.width
()
1150
)
{
secondAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
850
)
{
secondAnimation()
;
}
}
Код, который содержит анимацию, следующий:
var
secondAnimation =
function
()
{
$(".method:eq(0)"
)
.delay
(1000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
}
)
;
$(".method:eq(1)"
)
.delay
(2000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
$(".method:eq(2)"
)
.delay
(3000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
$(".method:eq(3)"
)
.delay
(4000
)
.animate
({
opacity:
1
}
,
"slow"
,
function
()
{
$(this
)
.find
("h4"
)
.css
("background-color"
,
"#b5c3d5"
)
;
}
)
;
}
;
Код выше последовательно анимирует свойство opacity для элементов .method , а затем меняет цвет фона дочерних элементов h4 .
Пример #4Этот эффект также зависит от верхней позиции полосы прокрутки и ширины окна. Более конкретно:
Это реализовано следующим кодом:
if
($(window)
.width
()
3500
)
{
thirdAnimation()
;
}
}
else
if
($(window)
.width
()
>
549
&
amp;&
amp;
$(window)
.width
()
2200
)
{
thirdAnimation()
;
}
}
else
{
if
($(window)
.scrollTop
()
>
1600
)
{
thirdAnimation()
;
}
}
Код для анимации следующий:
.delay (2000 ) .animate ({opacity: 1 ,
right: 0
} , "slow"
) ;
$(".blogs"
)
.find
("button"
)
.delay
(2500
)
.animate
({
opacity:
1
,
bottom:
0
}
,
"slow"
)
;
}
;
Код выше последовательно анимирует свойства opacity, left, right и bottom для элементов в P, IMG, BUTTON .
ЗаключениеЯ надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
Я уверен, что Вам встречались такие сайты, на которых при прокрутке страницы вниз дополнительный контент, а именно блоки, подгружались с красивыми и плавными эффектами. Оказывается подобное очень просто делается с помощью простого скрипта и нескольких правил CSS. В демо будет несколько эффектов загрузки, которые Вы можете выбрать для своего сайта.
А теперь давайте посмотрим как выглядит сама структура подгружаемых блоков в HTML:
Как видите, что код очень простой.
CSSТаким образом у нас получилась страница, на которой расположено несколько блоков, которые должны при прокрутке вниз плавно подгружаться. Теперь нам нужно придумать 2 класса CSS, которые будут работать если один из блоков окажется в видимом поле браузера:
Hidden{ opacity:0; } .visible{ opacity:1; }
jQueryТеперь нам нужно добавить скрипт , который запустить весь этот не сложный двигатель. Вот именно в этом коде мы будем использовать тот класс который отвечает за один из многих типов анимации в Animate.css, например это будет fadeIn, соответственно код будет иметь такой вид:
JQuery(document).ready(function() { jQuery(".post").addClass("hidden").viewportChecker({ classToAdd: "visible animated fadeIn", offset: 100 }); });
Работает данный скрипт следующим образом: если наш блок находится в невидимом поле браузера ему присваивается класс hidden, который скрывает наш блок, после того как наш блок только доходит видимой части окна ему тут же присваивается класс visible вместе с классом от Animate.css, который добавляет красивую анимацию при появлении. Вот и весь секрет:)
Надеюсь Вам понравился данный урок. Пока:)
Всем привет. Кто-то из вас, уже читал статью о том, . Многим этот материал понравился, но дело в том, что анимация проигрывалась только при прокрутке вниз. Многим, как и мне, хотелось, чтобы эта анимация проигрывалась при скролле как вниз, так и вверх. Например, при скролле вниз, какой-нибудь элемент плавно появлялся, а при дальнейшей прокрутке, точно также плавно исчезал. И в обратную сторону все происходило таким же образом.
Я уже говорил, что плохо знаю javascript (в процессе изучения), и самому реализовать данный функционал мне не удалось. Но к счастью я нашел готовое решение на другом сайте. Придумал его Артем Анашев, один из авторов на блоге loftblog.ru . Там материал, по этой теме, представлен исключительно в видеоформате, я же попробую описать все в текстовом и выложить свой исходинк. Если вам удобнее смотреть именно видеоматериал, то в конце статьи можете ознакомиться с оригиналом:)
Как и в прошлый раз скачиваем и подключаем библиотеку animate.css , там же можно подбирать тип анимации в удобном визуальном исполнении:
В данной статье я буду использовать не оптимизированную версию библиотеки annimate.css, но вам рекомендую подключать именно animate.min.css , скачанную с github. Так как эта версия меньше весит, а соответственно будет грузиться быстрее.
Я поместил ее в папку «css», поэтому получился следующий путь:
Теперь необходимо подключить jquery и плагин waypoints, который поможет нам прокручивать анимацию в обе стороны:
Waypoints вы можете скачать по этой ссылке или взять из исходника (как и другие файлы, необходимые для реализации данного эффекта).
Как и в видео ниже, предлагаю сделать такую структуру, чтобы три элемента, расположенные друг за другом (в ряд), плавно появлялись с небольшой задержкой, а затем, также плавно исчезали. Я создал небольшой макет с крупными иконками, которые и будут анимироваться:
Внимание! Тестировать эффект необходимо на локальном или внешнем сервере. В противном случае анимация не будет проигрываться.
Анимация при скролле в обе стороны — html разметка
Я создал класс «box», в котором буду хранить свои изображения.
Здесь нет ничего особенного, просто задаю ширину и высоту области, в которой буду хранить иконки. Делаю отступ слева 50px и выравниваю по левому краю. Этот блок сугубо индивидуален и можете не обращать на него внимание. Просто под мой макет лучше всего подходили именно эти параметры. Идем дальше.
Для того, чтобы проигрывалась анимация необходимо добавить класс animated. Его свойства прописаны в библиотеке animate.css, которую мы подключили ранее.
Класс boxHidded, нужен для того, чтобы сделать, в начальный момент времени наши иконки полностью прозрачными. Это подразумевает логика нашего скрипта. Ведь иконки, при прокрутке должны плавно появиться, а затем также плавно исчезнуть.
BoxHidded{ visibility: hidden; /* Делаем иконки полностью прозрачными */ } .fadeInUp, .fadeOutDown{ visibility: visible; /* Делаем иконки полностью не прозрачными */ }
Класс delay-05s и delay-1s отвечает за задержку в проигрывании анимации на 0.5 секунды и 1 секунду соответственно. Давайте рассмотрим свойства, заданные этим классам:
Delay-05s{ -webkit-animation-delay: .5s; -moz-animation-delay: .5s; -o-animation-delay: .5s; animation-delay: .5s; } .delay-1s{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; }
На этом работа с таблицей стилей закончена, нам осталось перед закрывающимся тегом body разместить следующий скрипт
$(".box") .waypoint(function(dir) { if (dir === "down") $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); else $(this) .removeClass("fadeInUp") .addClass("fadeOutDown"); }, { offset: "80%" }) .waypoint(function(dir) { if (dir === "down") $(this) .removeClass("fadeInUp") .addClass("fadeOutDown"); else $(this) .removeClass("fadeOutDown") .addClass("fadeInUp"); }, { offset: -50 })
Обратите внимание на строки:
RemoveClass("fadeOutDown") .addClass("fadeInUp");
В них мы добавляем и удаляем классы, отвечающие за стили анимации, которые будут проигрываться при прокрутке. В данном случае fadeInUp и fadeOutDown. Вы можете выбрать любые виды анимации, представленные на официальной страничке библиотеки animate.css.
Чтобы изменить момент, в который должна начать проигрываться анимация — изменяйте значение offset. В данном случае задано 80%. Как я понял, это расстояние от верхней точки экрана, до блока, который анимируем.
Меня несколько раз спрашивали о том, есть ли возможность задать расстояние до старта анимации в процентах, так как мониторы у всех разные. В прошлом варианте исполнения данного эффекта не было возможности сделать этого в процентах. Из-за этого возникали определенные проблемы.
В данном случае — эта проблема решена. Первый offset отвечает за старт анимации. А второй за исчезновение блоков. То есть, когда становится не видно 50 пикселей анимированого контента. Попробуйте! На примере вы все поймете.
dimadv7
// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>
Приветствую. Сегодня мы научимся делать анимацию элементов на странице, и отображать анимацию при прокрутке страницы. В этом уроке будем работать с библиотеками animate.css и wow.js. Также этот урок записан в видео, и у блога появился канал на youtube. Поэтому новые уроки будут сопровождаться видео материалами. Поехали!
Для начала я подготовил html страницу с простыми элементами (заголовками и картинками) которые будем анимировать. Вот HTML код страницы:
Заголовок первый
Заголовок второй
Заголовок третий
Заголовок четвертый
Заголовок пятый
И простая CSS разметка:
Section { width: 80%; text-align: center; position: relative; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; } section h1 { font-size: 32px; font-weight: bold; margin: 20px 0 50px; text-transform: uppercase; } section .col { width: 30%; margin: 0 1% 50px; display: inline-block; }
Как видим все действительно очень просто.
Подключаем animate.css. Делаем анимацию элементовСкачиваем библиотеку animate.css. Я положил файл animate.min.css в папку /libs в рядом с html страницей. Подключаем animate.min.css как обычный css файл, между теами .
Теперь к элементам, которым необходимо применить анимацию надо добавить нужные классы css стилей.Необходимо добавить класс animated и класс с названием анимации, напимер swing. Вот что получится в итоге, для заголовка h1:
Заголовок первый
Теперь данный заголовок будет проигрывать заданную анимацию при загрузке страницы. Таким же способом зададим анимацию и для других элементов:
Заголовок первый
Мы добавили классы animated для заголовка, и для каждой колонки, теперь при загрузке страницы они будут воспроизводить анимацию. Аналогично можно добавить анимацию и к остальным элементам страницы. Но есть небольшая проблема, вся анимация будет воспроизводиться при загрузке страницы. И при прокрутке к элементам, которые находятся за пределами первого экрана, мы уже не увидим анимацию, так как она уже произошла, когда страница была загружена. Чтобы показывать анимацию только тогда, когда элемент находится в зоне видимости, нужно подключить библиотеку wow.js
Подключение библиотека wow.js для анимации при прокрутке страницыБиблиотека wow.js была специальна сделана, чтобы работать в паре с библиотекой animate.css. Работает она так, что анимация элементов срабатывает не при загрузке страницы, а тогда когда эти элементы попадают в зону видимости, то есть при прокрутке страницы.
Для подключения библиотеки я поместил файл wow.min.js в паgre /libs рядом со страницей, и подключаю его как обычный js скрипт. Также после подключения, эту библиотеку необходимо инициализировать. Подключать wow.js следует после подключения jquery. Это обязательное условие.
new WOW().init();
Теперь когда библиотека подключена, переходим к редактированию кода. Для применения работы wow.js для элементов, необходимо добавить класс wow. Кстати ним можно заменить класс animated. Получается вот так.
Заголовок первый
Заголовок первый
Изменив на всех элементах с анимацией animated на wow, мы увидим что теперь анимация элементов срабатывает при прокрутке страницы, а не при загрузке.
Также библиотека wow.js содержит дополнительные настройки. Посмотреть их можно в документации на сайте данной библиотеки. Например можно добавить задержку в анимации. Задается она html5 параметром data-wow-delay=»1s». Вместо 1s, можно указать свое значение задержки. Я выставил задержку для элементов первого раздела так, что анимация каждого элемента будет начинаться после предыдущего, и вот что получилось:
Заголовок первый
На этом все. Ниже вы можете посмотреть видео данного урока, найти ссылки на используемые библиотеки, посмотреть готовый результат того что получилось и скачать файлы — архив с готовой версткой, и заготовку для выполнения данного урока.
Референсы для урока
Библиотека Animate.css: