Добірка сайтів з анімацією при прокручуванні для натхнення - сайти з анімацією при прокручуванні сторінки

Відео: Анімація на сайті. Animate.css // Веб-розробник 1.0

Багато вже бачили на сайтах анімацію при прокручуванні сторінки. Але сайти з даної збірки трохи відрізняються від тих, які зазвичай зустрічаються в рунеті. Тут анімація залежить від скролла безпосередньо. При перегляді даних сайтів спробуйте прокрутити сторінку повільно вниз, а потім повільно вгору.

Раніше я писав про інтерактивні Лендінзі. Обов`язково подивіться цю добірку:

• ТОП-10 інтерактивних Лендінзі

Пару слів про те, чим анімація при прокручуванні на сайтах в даній збірці відрізняється від анімації, яка найчастіше зустрічається на просторах рунета:

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

А тут розглянуті приклади сайтів, де анімація елементів безпосередньо залежить від прокрутки екрану. Тобто, елемент з`являється рівно настільки, наскільки людина прокрутив екран. Йде інтерполяція значень.

Завдяки цьому, користувач сам контролює процес появи елементів на сторінці. Анімація при прокручуванні в цьому разі має інший зміст.

Тут можна відразу знайти і мінуси, і плюси даної анімації. Адже не завжди хочеться, щоб людина керував появою елементів, тому що не кожен здогадається крутити з правильною швидкістю. А щоб цього уникнути, краще не робити анімацію при прокручуванні головним функціоналом.

Трохи пізніше я постараюся більш детально розкрити процес створення такої анімації, а поки що подивіться дані сайти і перейдіть кожен з них до самого кінця.

1. Appliancetecltd.com

Анімація на цьому сайті є основою. Тому що блоки з`являються тільки тоді, коли ми прокручуємо сторінку. Якщо ми прокручуємо сторінку трохи вгору, то анімація йде в зворотному напрямку.

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

У порівнянні з сайтами, які Ви побачите нижче, цей досить маленький, але анімація блоків виглядає дуже ефектно.

2. Lempens-design.com

Тут ми відразу бачимо набагато більше різної анімації елементів: блоки роз`їжджаються, кнопки повертаються, потяг проїжджає і так далі. Незвичайна анімація з`являється навіть при наведенні на деякі кнопки.

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

3. Pedrolandaverde.com

Відео: Adobe edge animate: як створити сайт на html5. урок 4

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

Як ви вже помітили (якщо зайшли на цей сайт), крім обертових шестерень тут є ще кілька анімованих зображень. Але їх не дуже багато. І таке анімація дійсно приємна і цікава. Раджу взяти на озброєння цю концепцію.

4. InfoQuest

Задумка в цьому прикладі дуже цікава. Поступово прокручуючи сторінку, Ви ніби гортає комікс. Тобто тут є і діалоги, і дія, і красива графіка. Дивитися на таке одне задоволення. А все що потрібно робити, так це лише прокручувати сторінку поступово вниз.

Ідея класна, в невеликому масштабі можна таке реалізувати і на Лендінзі. Головне, це зробити дійсно тематично для Лендінзі.

5. Sustainability.bam.co.uk

Ще один приклад сторінки з анімацією при прокручуванні, де анімація не заважає дивитися сторінку і не залежить від неї. Тобто вона тут доповнює загальну картину.

Цей спосіб створення анімації набагато легше і придумати саму ідею для такої анімації легше.

6. Makeyourmoneymatter.org

Інфографікою на сайті вже нікого не здивуєш. Навіть тієї інфографікою, яка займає весь простір сторінки. А ось цей сайт - відмінний приклад анімації інфографіки при прокручуванні сторінки. Погодьтеся, така інфографіка дійсно круто виглядає!

Якщо вам сподобалася така анімація і інфографіка, то для початку необхідно створити інфографіку. Зробити це можна за допомогою одного з даних сервісів:

• ТОП-10 сервісів для створення інфографіки онлайн

7. Merry Сhristmallax

Симпатична анімація, в процесі якої з мальованої ялинки виходить новорічна ялинка. Тут відмінно простежуються окремі блоки, які анімуються час прокручування сторінки. Зроблено красиво і можна деякі ідеї "брати на озброєння".

8. Fluger.com

Креативна ідея з літаком, який летить в двох напрямках: якщо прокручувати сторінку вниз, то літак летить вниз і іноді вправо, а якщо прокручувати в зворотному напрямку, то літак змінює напрямок на протилежне. Цей маленький нюанс дійсно надає ще більше інтерактивності даною статтею.

9. Сoffee

Хочете дізнатися яким чином роблять каву? Тоді просто перейдіть даний Лендінгем до самого кінця. Навіть не знаючи англійської можна зрозуміти те, про що йде мова на цій сторінці. Всі зображення настільки яскраві і добре виконані, що створюється відчуття перегляду відеоролика. Але тільки це "відеоролик« з одною перевагою ... Ви повністю керуєте їм # 128521; .

10. Kaipoche.co

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

• CSS3 анімація для початківців

11. Buntspenden

Після перегляду великої кількості сайтів з анімацією цей навряд чи Вас чимось здивує. Але тут є один елемент, якого немає на попередніх сайтах. Цей елемент - меню. Тобто при кліці на пункти меню відкривається відповідний блок.

12. KIA

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

13. Dangersoffracking

У порівнянні з попереднім прикладом, цей сайт завантажується набагато швидше, але тут і анімація не така масштабна.

14. Everylastdrop

Інтерактивний сайт з анімаційними елементами, де показується кількість води, яку ми витрачаємо щодня. Навіть якщо ви не знаєте що написано англійською, по зображеннях інтуїтивно зрозуміло що до чого.

15. Arnold Clark

Це один з тих сайтів, де анімації при прокручуванні настільки багато, що навіть пальці втомлюються при Скролл сторінки. Крім того, анімація іноді з`являється дуже повільно. Тому, щоб побачити повноцінну анімацію елемента, доводиться дуже багато крутити коліщатко миші.

зміст

• 1. Appliancetecltd.com
• 2. Lempens-design.com
• 3. Pedrolandaverde.com
• 4. InfoQuest
• 5. Sustainability.bam.co.uk
• 6. Makeyourmoneymatter.org
• 7. Merry Сhristmallax
• 8. Fluger.com
• 9. Сoffee
• 10. Kaipoche.co
• 11. Buntspenden
• 12. KIA
• 13. Dangersoffracking
• 14. Everylastdrop
• 15. Arnold Clark

висновок

На сайтах, які я навів у цій статті, анімація реалізована за допомогою різних способів. Десь використана бібліотека ScrollMagic, десь Skrollr, а десь і зовсім інші методи.

Є й інші способи створення анімації при прокручуванні. Зверніть також увагу на ці приклади:

• Малювання елементів Лендінзі при прокручуванні
• Оригінальний ефект для Лендінзі при Скролл
• Гарний ефект при прокручуванні на продає сторінку

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

Якщо Вам цікаво яким чином створюється така анімація при прокручуванні, то пишіть в коментарях нижче.

Успіхів!