Лого www.SiteHere.ru

Подборка сайтов с анимацией при прокрутке для вдохновения — сайты с анимацией при прокрутке страницы

Многие уже видели на сайтах анимацию при прокрутке страницы. Но сайты из данной подборки немного отличаются от тех, которые обычно встречаются в рунете. Здесь анимация зависит от скролла напрямую. При просмотре данных сайтов попробуйте прокрутить страницу медленно вниз, а затем медленно вверх.

Раньше я писал об интерактивных лендингах. Обязательно посмотрите данную подборку:

Пару слов о том, чем анимация при прокрутке на сайтах в данной подборке отличается от анимации, которая чаще всего встречается на просторах рунета:

Обычно, когда Вы прокручиваете страницу, элемент появляется полностью. Например, такую анимацию можно сделать с помощью плагина Wow.js. Также есть аналоги, где элемент появляется каждый раз, когда пропадает с экрана, который видит пользователь.

А здесь рассмотрены примеры сайтов, где анимация элементов напрямую зависит от прокрутки экрана. То есть, элемент появляется ровно настолько, насколько человек прокрутил экран. Идет интерполяция значений.

Благодаря этому, пользователь сам контролирует процесс появления элементов на странице. Анимация при прокрутке в этом случае имеет другой смысл.

Здесь можно сразу найти и минусы, и плюсы данной анимации. Ведь не всегда хочется, чтобы человек управлял появлением элементов, потому что не каждый догадается крутить с правильной скоростью. А чтобы этого избежать, лучше не делать анимацию при прокрутке главным функционалом.

Чуть позже я постараюсь более подробно раскрыть процесс создания такой анимации, а пока что посмотрите данные сайты и прокрутите каждый из них до самого конца.

1. Appliancetecltd.com

Пример сайта с анимацией при прокрутке 1

Анимация на этом сайте является основой. Потому что блоки появляются только тогда, когда мы прокручиваем страницу. Если мы прокручиваем страницу немного вверх, то анимация идет в обратном направлении.

На этом сайте помимо анимации блоков также использована анимация размытия, что делает сайт еще более привлекательным. Не зная как устроена анимация, можно подумать, что сайт очень широкий. Но на самом деле библиотеки анимации позволяют многие вещи делать автоматически.

По сравнению с сайтами, которые Вы увидите ниже, этот довольно маленький, но анимация блоков выглядит очень эффектно.

2. Lempens-design.com

Пример сайта с анимацией при прокрутке 2

Здесь мы сразу видим намного больше различной анимации элементов: блоки разъезжаются, кнопки поворачиваются, поезд проезжает и так далее. Необычная анимация появляется даже при наведении на некоторые кнопки.

Но больше всего на этом сайте бросаются в глаза изображения, которые размещаются в конце блока. Хотя они полностью белые, но из-за красивого фонового изображения они прекрасно дополняют блок.

3. Pedrolandaverde.com

Пример сайта с анимацией при прокрутке 3

Чем мне нравится данный сайт, так это тем, что здесь анимация является дополнительным элементом, а не основным. То есть она никак не мешает прокручивать страницу. Анимация здесь лишь дополняет и "оживляет" страницу, делая ее более динамической.

Как вы уже заметили (если зашли на этот сайт), кроме крутящихся шестеренок здесь есть еще несколько анимированных изображений. Но их не очень много. И такая анимация действительно приятна и интересна. Советую взять на вооружение данную концепцию.

4. InfoQuest

Анимация при прокрутке на сайте InfoQuest

Задумка в этом примере очень интересная. Постепенно прокручивая страницу, Вы как будто листаете комикс. То есть здесь есть и диалоги, и действие, и красивая графика. Смотреть на такое одно удовольствие. А все что нужно делать, так это лишь прокручивать страницу постепенно вниз.

Идея классная, в небольшом масштабе можно такое реализовать и на лендинге. Главное, сделать это действительно тематично для лендинга.

5. Sustainability.bam.co.uk

Интересная анимация при прокрутке страницы

Еще один пример страницы с анимацией при прокрутке, где анимация не мешает смотреть страницу и не зависит от нее. То есть она здесь дополняет общую картину.

Этот способ создания анимации гораздо легче и придумать саму идею для такой анимации проще.

6. Makeyourmoneymatter.org

Анимация при скролле Makeyourmoneymatter.org

Инфографикой на сайте уже никого не удивишь. Даже той инфографикой, которая занимает все пространство страницы. А вот этот сайт — отличный пример анимации инфографики при прокрутке страницы. Согласитесь, такая инфографика действительно круто смотрится!

Если вам понравилась такая анимация и инфографика, то для начала необходимо создать инфографику. Сделать это можно с помощью одного из данных сервисов:

7. Merry Сhristmallax

Merry Сhristmallax анимация при прокрутке страницы

Симпатичная анимация, в процессе которой из рисованной елки получается новогодняя елка. Здесь отлично прослеживаются отдельные блоки, которые анимируются при прокрутке страницы. Сделано красиво и можно некоторые идеи "брать на вооружение".

8. Fluger.com

Fluger.com - анимация при прокрутке сайта

Креативная идея с самолетом, который летит в двух направлениях: если прокручивать страницу вниз, то самолет летит вниз и иногда вправо, а если прокручивать в обратном направлении, то самолет меняет направление на обратное. Этот маленький нюанс действительно придает еще больше интерактивности данной странице.

9. Сoffee

Анимация сайта Сoffee при прокрутке страницы

Хотите узнать каким образом делают кофе? Тогда просто прокрутите данный лендинг до самого конца. Даже не зная английского можно понять то, о чем идет речь на этой странице. Все изображения настолько красочны и хорошо выполнены, что создается ощущение просмотра видеоролика. Но только это "видеоролик" с одним преимуществом… Вы полностью управляете им 😉 .

10. Kaipoche.co

Kaipoche.co и анимация при прокрутке данного сайта

Сама страница не очень большая, но анимация в верхней ее части смотрится великолепно. Здесь также много элементов, созданных с помощью анимации CSS3. Тем, кто еще не знает, как она создается, советую изучить данную статью:

11. Buntspenden

Buntspenden анимация при прокрутке

После просмотра большого количества сайтов с анимацией этот вряд ли Вас чем-то удивит. Но здесь есть один элемент, которого нет на предыдущих сайтах. Этот элемент — меню. То есть при клике на пункты меню открывается соответствующий блок.

12. KIA

KIA и анимация при прокрутке

Анимация на сайте KIA также создана красиво, но загрузка сайта осуществляется очень долго. А если интернет слабенький, то время загрузки может доходить до 2-3 минут. Вряд ли пользователи будут ждать столько времени, скорее всего, они закроют страницу с данным сайтом.

13. Dangersoffracking

Dangersoffracking - анимация при прокрутке

В сравнении с предыдущим примером, этот сайт загружается намного быстрее, но здесь и анимация не такая масштабная.

14. Everylastdrop

Everylastdrop - при прокрутке анимация

Интерактивный сайт с анимированными элементами, где показывается количество воды, которое мы тратим ежедневно. Даже если вы не знаете что написано на английском, по изображениям интуитивно понятно что к чему.

15. Arnold Clark

Arnold Clark

Это один из тех сайтов, где анимации при прокрутке настолько много, что даже пальцы устают при скролле страницы. Кроме того, анимация иногда появляется очень медленно. Поэтому, чтобы увидеть полноценную анимацию элемента, приходится очень много крутить колесико мыши.

Содержание

Вывод

На сайтах, которые я привел в данной статье, анимация реализована с помощью различных способов. Где-то использована библиотека ScrollMagic, где-то Skrollr, а где-то и вовсе иные методы.

Есть и другие способы создания анимации при прокрутке. Обратите также внимание на эти примеры:

Как вы уже поняли, анимация при прокрутке может иметь масштаб, то есть занимать всю страницу и анимированными будут не только сами элементы, но и фон. А также может быть такой вариант, когда анимируется при прокрутке одна небольшая часть или элемент на странице.

Если Вам интересно каким образом создается такая анимация при прокрутке, то пишите в комментариях ниже.

Успехов!

С Уважением, Юрий Немец

Подборка сайтов с анимацией при прокрутке для вдохновения — сайты с анимацией при прокрутке страницы 4.58/5 (91.58%) 19 голос(ов)

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • LiftMoney

    А вот мне под номером 4 больше напомнило игру, там даже уровни присутствуют))

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *