Интернет меняется каждый день. Одни технологии и методы возникают, другие исчезают. По этой причине веб-дизайнеры и front-end разработчики должны быть в курсе последних тенденций в веб-дизайне. Parallax-прокрутка, фиксированные заголовки, плоский дизайн, одностраничные сайты и CSS-анимация некоторые из самых горячих веб-тенденций на текущий момент.
В этом уроке мы рассмотрим создание анимации и эффектов при прокрутке страницы с помощью CSS и jQuery.
Четыре эффекта, которые мы будем создавать можно увидеть на этой странице .
Примечание: Код, используемый в этом уроке можно было бы улучшить при помощи кэширования объектов и использования CSS анимации вместо метода jQuery "animate() ", но для простоты мы сконцентрируемся в первую очередь на идее.
Что такое анимация и эффекты при прокрутке страницы?Подобная анимация и эффекты новый, набирающий популярность метод, который дает front-end разработчикам возможность создавать мультимедийные и интерактивные веб-проекты. Когда пользователь прокручивает страницу вниз, разработчики могут легко манипулировать объектами с помощью CSS и jQuery.
Для того чтобы обнаружить прокручивает ли пользователь страницу вниз, мы используем jQuery-событие scroll() .
После того, как мы узнаем, что пользователь прокручивает страницу, мы можем получить вертикальное положение полосы прокрутки с помощью метода scrollTop() и применить нужные эффекты:
if
($(this
)
.scrollTop
()
>
0
)
{
// создаем эффекты и анимацию
}
}
)
;
Если мы заинтересованы в создании адаптивных эффектов (оптимизированных под разные разрешения экрана), то мы должны определить следующие свойства:
Без определения этих свойств мы создадим эффекты которые будут "статичными" и не будут работать правильно, если пользователь изменит размер окна горизонтально или вертикально.
Мы можем легко получить значения этих свойств с помощью методов 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 ({
$(".blogs"
)
.find
("button"
)
.delay
(2500
)
.animate
({
opacity:
1
,
bottom:
0
}
,
"slow"
)
;
}
;
Код выше последовательно анимирует свойства opacity, left, right и bottom для элементов в P, IMG, BUTTON .
ЗаключениеЯ надеюсь, что показаные здесь четыре примера помогут вам понять как можно создавать различные эффекты и анимацию при прокрутке страницы.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
Давно и уже успели укорениться среди разработчиков.
Итак. С помощью плагинов, которые представлены в этой подборке, вы сможете создать современный сайт с отличной динамикой. Я думаю, каждый человек, который интересуется разработкой сайтов, видел эти плагины в действии. При прокрутке страницы, блоки, различные элементы или текст плавно появляются
, выезжают, крутятся и пр. Как показывает практика, клиентам очень нравятся такие фентифлюшки.
Внедрить эффекты при скроллинге
в страницу не так сложно, как может показаться на первый взгляд. Все что нужно - это качественный плагин и прямые руки. Конечно, начинающий верстальщик может испытывать трудности, но стоит немного посидеть, разобраться в принципах работы и задача покажется очень простой.
Несмотря на то, что анимация на сайте многим по душе, не стоит переусердствовать, иначе у вас получится перегруженная, визуально плохо воспринимаемая страница, в которой все внимание будет приковано ко всем этим «свистелкам», а не к информации, которую требуется донести до посетителя. К тому же, чем больше подключено скриптов, тем медленнее работает страница. В старых браузерах все это дело может вовсе не работать. Подключайте эффекты с умом. Зачастую, простого плавного, ненавязчивого появления блоков хватает. Такой эффект придает странице плавности и динамики, делает сайт живым. На своей практике мне пришлось много повидать сайтов с эффектами без чувства меры. От такого просто тошнит - единственное чувство, которое возникает. Но, наверное, разработчики надеялись на «Вау эффект». Итак. Используйте все с умом и в меру!
Все плагины абсолютно бесплатны
, но я бы рекомендовал ознакомиться с лицензий, так как в некоторых случаях для использования в коммерческих целях нужно выполнить ряд условий.
Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery . Получается, что для данного скрипта открыты все двери...И как пример, скрольте вниз...Смелее...
С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.
Анимация при скроллинге: комбинация* чтобы повторить анимацию, перезагрузите страницу.
Как настроить?ШАГ 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 + анимация при прокрутке