Лого SiteHere.ru

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

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

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

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

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

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

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

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

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

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

1. Curenails.co

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

Эфффект параллакса практически на каждом элементе. Проще увидеть своими глазами, чем понимать о чем речь из описания.

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

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

Продающий лендинг под ключ

Посмотрите наши кейсы для разных ниш

Сделайте сами на конструкторе

2. Lempens-design.com

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

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

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

3. The Goonies

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

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

4. InfoQuest

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

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

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

5. Sustainability.bam.co.uk

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

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

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

6. Makeyourmoneymatter.org

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

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

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

7. Merry Сhristmallax

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

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

8. Dogstudio

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

Креативная идея с волком, который выполнен в 3D и при прокрутке меняет свое положение. Звук делает сайт более полным, что странно, так как непривычно видеть такие сайты. Чаще всего звук на фоне отталкивает больше, чем нравится.

9. Сoffee

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

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

10. Kaipoche.co

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

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

11. Buntspenden

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

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

Лендинг до заявок с рекламой

Посмотрите наши кейсы для разных ниш

Сделайте сами на конструкторе

12. ToyFight

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

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

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

13. Walking Dead

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

Небольшой анимированный комикс по сериалу «Ходячие мертвецы». Ничего не буду рассказывать, переходите и начинайте прокручивать страницу. Скажу только, что анимация будет горизонтальной, но от этого она хуже не становится 🙂 .

14. Everylastdrop

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

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

15. Arnold Clark

Arnold Clark

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

Содержание

Вывод

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

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

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

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

Успехов!

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

3 комментария к записи
  • LiftMoney

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

     
  • Татьяна

    Юрий, проверьте ссылки на эти ресурсы, у меня на первый appliancetecltd.com вообще не открывается, а несколько очень долго.

     
    • Юрий Немец

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

       

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

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