Создание анимации при прокрутке страницы при помощи jQuery. Создание анимации при прокрутке страницы при помощи jQuery Что такое анимация и эффекты при прокрутке страницы
Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и 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 .
ЗаключениеЯ надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются
, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге
в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны
, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.
Более детальную информацию можно найти в документации к данному jQuery плагину.
Имеются проблемы с , как и практически во всех подобных плагинах. Если текст не помещается по высоте, то он просто обрезается и полоса прокрутки не появляется.
Данный плагин можно использовать, например, для создания портфолио фотографа или дизайнера . Думаю, посетители оценят ваш сайт.
Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery . Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...
С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.
Анимация при скроллинге: комбинация«WOW.js » и «Animate.css »
на WordPress...
* чтобы повторить анимацию, перезагрузите страницу.
Как настроить?ШАГ 1
Для начала скачайте эти два файла («WOW.js» и «Animate.css»)
ОБНОВЛЕНО
(25.июль.2019):
wow.min.js v1.2.1
| animate.min.css v3.7.2
ШАГ 2
Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).
ШАГ 3
Помещаем в эту строку:
* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл - скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂
ШАГ 4
Помещаем в самый низ страницы перед эти строки:
* Тоже укажите правильный путь к файлу и проверьте в браузере.
Определенная информацияШАГ 6
Продвинутые настройки. Добавляем функции:
data-wow-duration
: Меняем продолжительность анимации;
data-wow-delay
: Задержка перед началом анимации;
data-wow-offset
: Расстояние до запуска анимации (относительно нижней части окна браузера);
data-wow-iteration
: Повторяем анимацию «столько-то
раз».
Приветствую, уважаемые друзья. Сегодня я подготовил для вас еще один интересный урок, в котором вы научитесь задавать красивую анимацию для элементов вашего сайта. Мы не будем изучать создание анимации с нуля, а будем использовать готовый скрипт.
Animate.CSS – именно так он называется. В нем собрано множество уже готовых к “употреблению” анимаций. Всё, что нам останется сделать – это подключить их в нужном месте и в нужное время!
Сто процентов, вас сейчас волнует один вопрос:
-Как выглядит Animate.CSS в работе?
Ну что же... отвечу: - Просто замечательно
Ну, а если больше конкретики… Например, всю анимацию на странице тренинга Верстаем на 5+ я реализовал именно при помощи этой штуки. Жмякните на кнопку ниже и попадете на страничку тренинга. Мотайте страницу до самого конца, и увидите, как работает анимация:
А вот это Вы создадите своими руками, если пройдете урок до конца :
Ладно, хватит чесать языком. Пора приступать к телу! Тьфу ты, ёлки-моталки, к делу!!
Урок Animate.CSS + анимация при прокрутке
