10 Фрагменти CSS та JavaScript для створення прокрутки паралакса

1. Панель інструментів веб-дизайнера Необмежена завантаження: 500,000 + веб-шаблони, теми, плагіни та...
2. 1. Велике падіння
3. 2. CSL Scrolling Parallax
4. 3. Простий тег зображення Parallax
5. 4. # Основний код Hackdays
6. 5. CSS Parallax
7. 6. Дизайн паралакса
8. 7. Прокрутка фонового зображення паралакса
9. 8. Зоряне тло
10. 9. Полотно Parallax Skyline
11. 10. Hover Parallax
12. 11. Фільтр розбитого скла

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

Це може стосуватися змін у фоновому режимі або напівфіксичних позицій позиції, які рухаються поряд з прокруткою користувача. Ми охопили багато прикладів на веб-сайтах, але не деталізували методики.

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

Панель інструментів веб-дизайнера
Необмежена завантаження: 500,000 + веб-шаблони, теми, плагіни та дизайн активів

СКАЧАТИ ЗАРАЗ

1. Велике падіння

Велике падіння розроблений CJ Gammon є одним з найбільш унікальних інтерфейсів, які я коли-небудь знайшов.

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

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

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

2. CSL Scrolling Parallax

Ось набагато більш практичний ефект паралакса з a фіксований фон і більше сторінок зверху.

Коли ви прокручуєтеся, кожен розділ сторінки з'являється "над" фоном. Це створює ілюзію глибини, і це один з ключових елементів для великого дизайну паралакса.

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

3. Простий тег зображення Parallax

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

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

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

4. # Основний код Hackdays

Фіксовані фонові зображення працюють добре, щоб розділити сторінки та розділити розділ вмісту рівномірно. Ви можете побачити прекрасний приклад у цьому пера створено для події Hackdays.

Під час прокручування можна відчути, що окремі розділи сторінки є "вищими", ніж фонові зображення. Це все по дизайну, щоб вдихнути життя в ефект паралакса під час прокрутки.

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

5. CSS Parallax

Це паралакс пера створений Пауло Куньхо - це унікальний приклад того, як працюють ефекти паралакса.

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

Цей самий ефект можна використовувати з a довгий макет прокрутки і він буде мати схожий стиль дизайну.

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

6. Дизайн паралакса

Ось цікавий дизайн паралакса для зразка Весільна сторінка створена Кеті Роджерс.

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

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

7. Прокрутка фонового зображення паралакса

Раніше я згадував, як швидкість прокручування може змінюватися залежно від темпу зміни фонового положення.

Добре, цей приклад , розроблений Багаєм Хауеллом, є ідеальним порівнянням, щоб побачити, як це працює в дії.

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

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

8. Зоряне тло

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

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

Але ви можете просто скопіювати / вставити це в макет, не роблячи занадто багато редагувань. CodePen дозволяє компілювати Sass до CSS з натисканням кнопки, так що це також не заважає отримати оригінальний код.

9. Полотно Parallax Skyline

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

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

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

10. Hover Parallax

Одним іншим ефектом, спрямованим на миші, є паралакс така конструкція створений Тюліо Філіпе. Вона не обганяє всю сторінку, тому вона має зовсім іншу концепцію паралакса.

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

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

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

11. Фільтр розбитого скла

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

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

Тим не менш, це вражаючий приклад глибини і руху паралакса під час прокрутки.