Использование фокусировки для добавления глубины и перемещения в приложение — Windows apps
Twitter LinkedIn Facebook Адрес электронной почты
- Статья
- Чтение занимает 2 мин
Параллакс — это визуальный эффект, при котором элементы, расположенные ближе к зрителю, перемещаются быстрее элементов фона.
Эффект параллакса создает ощущение глубины, перспективы и движения. В приложении UWP для создания эффекта параллакса можно использовать элемент управления ParallaxView.
Windows API библиотеки пользовательского интерфейса:класс ParallaxView, свойство VerticalShift, свойство HorizontalShift
API платформы: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift
Примеры
| Коллекция WinUI 2 | |
|---|---|
|
Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием.
Параллакс — это компонент системы проектирования Fluent Design, добавляющий движение, глубину и масштаб вашему приложению. См. сведения о системе проектирования Fluent Design.
Как это работает в пользовательском интерфейсе
В пользовательском интерфейсе можно создать эффекта параллакса, перемещая различные объекты с разной скоростью при горизонтальной или вертикальной прокрутке. Чтобы продемонстрировать, рассмотрим два уровня содержимого, список и фоновое изображение. Список размещается поверх фонового изображения, создавая ощущение, что список находится ближе к зрителю. Теперь, чтобы достичь эффекта параллакса, мы хотим, чтобы объект, ближайший к нам, перемещается «быстрее», чем объект, который находится дальше. Когда пользователь прокручивает интерфейс, список перемещается быстрее относительно фонового изображения, что создает иллюзию глубины.
Использование элемента управления ParallaxView для создания эффекта параллакса
Для создания эффекта параллакса используется элемент управления ParallaxView.
Он привязывает положение прокрутки элемента переднего плана, например списка, к фоновому элементу, например изображению. При прокрутке элемента переднего плана он анимирует фоновый элемент, создавая эффект параллакса.
Чтобы использовать элемент управления ParallaxView, выберите элемент Source, фоновый элемент и установите для свойств VerticalShift (для вертикальной прокрутки) и/или HorizontalShift (для горизонтальной прокрутки) значения выше нуля.
Свойство Source принимает ссылку на элемент переднего плана. Чтобы добиться эффекта параллакса, объектом переднего плана должен быть объект ScrollViewer или элемент, содержащий объект ScrollViewer, например ListView или RichTextBox.
Чтобы задать фоновый элемент, добавьте его в качестве дочернего элемента управления ParallaxView. Фоновым элементом может быть любой объект UIElement, например изображение или панель, содержащая дополнительные элементы пользовательского интерфейса.
Для создания эффекта параллакса объект ParallaxView должен располагаться за элементом переднего плана.
В этом примере показано, как создать эффект параллакса для списка:
<Grid>
<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">
<!-- Background element -->
<Image x:Name="BackgroundImage" Source="Assets/turntable.png"
Stretch="UniformToFill"/>
</ParallaxView>
<!-- Foreground element -->
<ListView x:Name="ForegroundElement">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
<x:String>Item 4</x:String>
<x:String>Item 5</x:String>
<x:String>Item 6</x:String>
<x:String>Item 7</x:String>
<x:String>Item 8</x:String>
<x:String>Item 9</x:String>
<x:String>Item 10</x:String>
<x:String>Item 11</x:String>
<x:String>Item 13</x:String>
<x:String>Item 14</x:String>
<x:String>Item 15</x:String>
<x:String>Item 16</x:String>
<x:String>Item 17</x:String>
<x:String>Item 18</x:String>
<x:String>Item 19</x:String>
<x:String>Item 20</x:String>
<x:String>Item 21</x:String>
</ListView>
</Grid>
ParallaxView автоматически настраивает размер изображения, чтобы он работал для операции параллакса, чтобы вам не нужно беспокоиться о прокрутке изображения вне представления.
Настройка эффекта параллакса
Свойства VerticalShift и HorizontalShift позволяют контролировать степень эффекта параллакса.
- Свойство VerticalShift указывает, насколько фон должен сдвинуться по вертикали за всю операцию параллакса. Значение 0 означает, что фон вообще не перемещается.
- Свойство HorizontalShift указывает, насколько фон должен сдвинуться по горизонтали за всю операцию параллакса. Значение 0 означает, что фон вообще не перемещается.
Чем выше значение, тем сильнее эффект.
Полный перечень способов настройки эффекта параллакса приведен в разделе «Класс ParallaxView».
Что рекомендуется и что не рекомендуется делать
- Используйте параллакс для списков с фоновым изображением.
- Можно использовать эффект параллакса в ListViewItems, если там содержится изображение.
- Не используйте его везде, чрезмерное использование может уменьшить его влияние
- Класс ParallaxView
- Fluent Design для UWP
- Science in the System: Fluent Design and Depth (Наука системы: глубина в Fluent Design)
11 потрясающих сайтов с параллакс-скроллингом
Дизайн
Автор: Livo
Дата публикации: 30.
11.2020
Параллаксная прокрутка – это когда макет веб-сайта видит, что фон веб-страницы с меньшей скоростью перемещается на передний план, создавая трёхмерный эффект при прокрутке. Параллаксная прокрутка существует достаточно давно и продолжает быть одной из тех тенденций, которые продолжают развиваться. А при умеренном использовании, он может обеспечить приятный элемент глубины, который приведёт к отличительному и запоминающемуся веб-сайту.
Вот несколько сайтов, подобранных Creative Blog, на которых эта техника используется с блестящим эффектом, чтобы показать, как это должно быть сделано. Если вы хотите по-настоящему раскрутить сайт, эти впечатляющие примеры CSS-анимации демонстрируют еще один отличный способ выделить его из общей массы.
1. История искусства и веб-дизайна
История искусства и веб-дизайна не являются предметами, которые вы должны объединить, но они прекрасно объединены на этом сайте истории искусства дизайна.
2. Интерактивный каталог Qode
Qode – это интерактивный каталог имеющий стилизованный текст снизу и навигационную систему, чтобы раскрыть изображение для каждого элемента. При нажатии на каталог отображается горизонтальная прокрутка с параллаксом, которая используется для демонстрации ряда тем WordPress. Это не самое новаторское использование параллаксной прокрутки в данном списке, но оно хорошо служит своей цели, а также используется разбрызгивание анимации.
3. Каналы
Отель Canals был спроектирован Маркусом Брауном и разработан Аристидом Бенуа. Сайт перенесет вас в 400-летнее путешествие по истории каналов Амстердама XVII века. Canals разработан для того, чтобы обеспечить опыт редакции, например, листать пышный том журнального столика, и он отлично использует параллакс, чтобы привлечь ваше внимание к новым разделам его истории и придать сайту тонкий эффект глубины.
4. История Балбесов
Любому возрасту гарантирована любовь к подростковому приключенческому фильму 80-х, «The Goonies» («Балбесы»), и если это вы, то этот сайт наверняка вызовет у вас ностальгию. Созданная Джозефом Берри с помощью WebFlow, The Story of The Goonies сайт является данью уважения ретро-классике, в которой используется параллакс-прокрутка, чтобы вовлечь вас в историю, познакомить с персонажами и раскрыть режим о фильме.
5. Собачья студия
Главной достопримечательностью сайта Dog Studio является красивая, анимированная, трехмерная собака в центре страницы, которая масштабируется и вращается по мере прокрутки страницы параллакса. Его освещение меняет цвет, когда вы наводите курсор на заголовки недавних проектов Dog Studio, и, возможно, вам больше всего понравится, когда он вращается перед частью копии страницы, скрывая часть текста.
6. Дизель: BAD Guide
Париж создал этот впечатляющий веб-сайт с параллаксом (и связанную с ним кампанию в социальных сетях), чтобы сопровождать запуск аромата Diesel BAD.
На одностраничном сайте представлена серия правил, составляющих «ПЛОХОЙ Гайд». Пользователь может исследовать сайт, перетаскивая мышь по странице параллакса, которая выложена как доска изображений, по которой нужно щелкнуть. Есть советы по всему: от Tinder («Проведите вправо, вправо, вправо, вправо — разберетесь позже») до Instagram («Не забудьте связаться с бывшим по четвергам #TBT») в сопровождении монохромные иллюстрации.
7. Firewatch
Один из самых красивых примеров прокрутки сайта с параллаксом, который мы видели – это веб-сайт игры Firewatch, в котором используются шесть движущихся слоев для создания ощущения глубины. Это здорово, потому что нет никакого перехвата прокрутки (что часто сопровождает эффект параллакса), и он используется только в верхней части страницы — остальная часть сайта остаётся прежней, поэтому вы сможете читать информацию. Если вы хотите увидеть, как это делается, CodePen является хорошей демонстрацией.
8. GitHub 404
Страница 404 GitHub не является строго параллаксной прокруткой, поскольку эффект происходит при покачивании мыши, а не при прокрутке, но это действительно забавная страница, которая использует слои для добавления глубины. В отличие от «правильного» параллакса, фон движется быстрее, чем передний план, создавая дезориентирующее ощущение потустороннего.
9. Джесс и Расс
Неудивительно, что свадебный веб-сайт пары дизайнеров Расс Машмайер и Джессики Хиш вызывает красоту. На сайте представлена их романтическая история с использованием параллаксной прокрутки для придания глубины иллюстрациям. Они поженились в 2012 году, но сайт все еще стоит посмотреть.
10. Сделайте ваши деньги значимыми
Финансы и деньги — далеко не самые интересные предметы. Но цифровое агентство из Нью-Йорка Firstborn поддерживает этот веб-сайт с динамической параллакс-скроллингом Make Your Money Matter для кредитного союза государственных служб.
С целью ознакомления общественности с преимуществами вступления в кредитный союз, а не использования банка, этот блестящий сайт включает в себя все, от того, как работает кредитный союз, до того, где его найти и как подать заявку, а также калькулятор, показывающий сколько банки получают от вкладов клиентов.
11. Мэдвелл
Агентство дизайна и разработки Madwell из Нью-Йорка демонстрирует свое портфолио с помощью ряда эффектов параллаксной прокрутки для создания заметного трехмерного стиля, который добавляет огромную глубину.
11 поразительных примеров веб-сайтов с эффектом параллакса, которые играют с перспективой это не просто еще одна преходящая тенденция веб-дизайна.
Для такой простой вещи, как настройка фоновых и передних элементов веб-страницы для перемещения с разной скоростью, параллакс является чрезвычайно гибким приемом веб-дизайна и продолжает привлекать наше внимание.
Мы собрали ряд ярких примеров веб-сайтов с эффектом параллакса, чтобы продемонстрировать, что вы можете сделать с помощью этой мощной техники прокрутки страниц.
Что такое параллакс-сайты?
Готовы добавить динамичности и глубины вашему веб-сайту? Параллаксная прокрутка приводит визуальные эффекты в движение и создает ощущение пространства, что делает взаимодействие с пользователем более захватывающим.
Вот как это работает: Элементы страницы, такие как графика, текст, фотографии, цветные разделы и другие визуальные элементы, перемещаются с разной скоростью относительно друг друга при прокрутке веб-сайта. Это создает ощущение перспективы и объемности, когда каждая часть кажется независимой от фонового пространства, по которому она продвигается.
Что нам нравится в параллаксе, так это то, что вы не ограничены в том, что вы можете с ним делать. Наряду с тем, что элементы перемещаются с разной скоростью, они могут масштабироваться вверх или вниз, изменять свою непрозрачность, вращаться, подвергаться трехмерным преобразованиям и добавлять к ним другие эффекты, которые делают их еще более привлекательными.
[изображение/графика, относящаяся к вышеприведенному]
Параллаксная прокрутка добавляет действия, принимая то, что в противном случае было бы пассивным пользовательским опытом, и придавая ему импульс энергии.
Деконструкция веб-сайтов с эффектом параллакса
Существует множество способов применения параллакса к веб-сайтам в зависимости от элементов, которые вы хотите установить с разной скоростью относительно друг друга. Тем не менее, на практике веб-сайты с параллаксом строятся на основе одного из двух строительных блоков: параллакса изображения раздела и параллакса нескольких изображений.
Параллакс изображения раздела
Это тип прокрутки параллакса, с которым вы, вероятно, лучше всего знакомы. Просто создайте раздел и добавьте изображение, а затем установите для фона раздела скорость прокрутки, отличную от скорости изображения. Смещение элементов дизайна, подобных этому, мгновенно придает веб-сайтам мягкое движение и утонченную глубину.
Это отличный способ указать, где заканчивается один раздел на вашем сайте и начинается другой. Вы обнаружите, что параллакс изображения раздела затрагивает многие веб-дизайны, помогая посетителям раскрывать контент.
Многослойный параллакс
Многослойный параллакс немного новее и ярче — он похож на анимацию, заставляя изображение выглядеть так, как будто оно постоянно движется, когда вы перемещаетесь по веб-сайту. Вместо одного элемента вы добавляете несколько элементов переднего плана и задаете для каждого из них перемещение с разной скоростью к фону.
Создает иллюзию движения элементов переднего плана относительно друг друга; каждая часть может отделиться от всего изображения и снова собраться во время прокрутки. Некоторые части изображения можно зафиксировать, а другие привести в движение. Они могут крутиться и кувыркаться. Многослойный параллакс — это универсальная техника дизайна, которую можно использовать множеством творческих способов, чтобы оживить дизайн.
Примеры веб-сайтов Slick Parallax
Теперь, когда мы рассмотрели основы параллакса, давайте посмотрим на него в движении. Мы составили список ярких примеров веб-сайтов с параллаксом, разобрали, как они были составлены и что они добавляют к дизайну.
[изображение/графика, относящиеся к вышеприведенному]
Margrete Den Første
Эффекты параллакса не обязательно должны быть огромными и впечатляющими. Нам нравится видеть, как они используются сдержанно. Этот рекламный сайт для фильма Маргрете Ден Фёрсте использует более легкий оттенок в этом разделе заголовка от этого веб-сайта, созданного в Vev.
И фоновое изображение, и слой текста поверх него приводятся в движение при прокрутке. Основное изображение движется медленнее, а текст, который отображается ниже, движется быстрее. Этот контраст придает ощущение непосредственности выдвигаемому тексту, а это сопоставление параллакса создает ощущение иерархии того, на что мы должны смотреть.
Тотем
Метавселенная — новый рубеж, и Тотем предлагает технологию, которая, как они надеются, станет ее частью.
Это футуристический дизайн, который сильно опирается на параллакс. От инопланетного монолита на заднем плане до парящих космических существ — возникает ощущение движения, которое кажется, что вы плывете в атмосфере странной и далекой планеты.
Фонд Мо Ибрагима
Фонд Мо Ибрагима, основанный в 2006 году, стремится улучшить жизнь африканцев путем создания более сильного правительства и руководства. COVID-19продолжает оказывать огромное влияние на эту развивающуюся страну, и этот веб-сайт, созданный с помощью Vev, показывает, что происходит, и потенциальные способы борьбы с продолжающимися последствиями пандемии. Они рассказывают эту важную историю с помощью убедительного письма, а также множества эффектов, запускаемых прокруткой, инфографики и параллакса.
По всему дизайну повторяются круги. Некоторые используются для выделения статистики, а другие просто для украшения. В двух приведенных выше примерах используется круг с низкой непрозрачностью, который касается верхней части фотографии и перетекает в следующую часть.
Прокрутка вниз заставляет круг двигаться с большей скоростью по фоновому изображению, подтягивая следующий блок вверх. Это сильный визуальный крючок, и его повторение действует как руководство, сигнализирующее нам продолжать чтение.
Hajk
Эта страница об устойчивом развитии, созданная Hajk, кажется тесно связанной с природой. Это еще один из найденных нами замечательных примеров веб-сайта с параллаксом, который был создан с использованием Vev.
При прокрутке этого раздела вверху верхний блок содержимого перемещается быстрее, чем фотография мужчины под ним. Это создает впечатление, что это окно, открывающее этот образ человека, ухаживающего за огнем. Это создает ощущение предвкушения, поскольку открытие изображения происходит медленнее, чем блок контента, который идет перед ним.
Sandland
С приглушенной цветовой палитрой, мягкими тенями и использованием практичного, но стильного шрифта Lausanne, Sandland, естественное средство для сна, убаюкивает вас в дизайне это так же приятно, как удобная кровать.
Этот дизайн отличается большой глубиной, активируемым прокруткой текстом и графическими эффектами, а также несколькими приятными штрихами параллакса. В этом разделе выше используется горизонтальный параллакс с элементами боковой прокрутки, которые движутся с разной скоростью. Примеры веб-сайтов с горизонтальным параллаксом встречаются редко, и нам нравится видеть, как дизайнеры берут что-то вроде параллакса и используют его по-новому.
Если вы уже знакомы с Vev, вы найдете этот эффект, среди нескольких других, таких как Scroll Zoom, Scrollytelling Video и Horizontal Scroll в библиотеке предварительно закодированных компонентов Vev, готовых к перетаскиванию в ваш следующий веб-дизайн.
. Если вы еще не пользовались нашей платформой, мы надеемся, что вы скоро заглянете к нам. В любом случае, хватит саморекламы, и вперед к большему количеству примеров веб-сайтов с параллаксом!
Часы Блок
Часы Блок открывается кучей гигантских букв. Каждый персонаж Блока раздвигается и поднимается наверх, когда вы прокручиваете вниз. Мы видим, что этот эффект параллакса повторяется в паре разных мест в этом дизайне, но он никогда не изнашивается, проявляясь с множеством других больших визуальных эффектов и насыщенных цветов.
Также стоит отметить (хотя это не совсем параллакс) горизонтальную прокручиваемую галерею часов, где отдельные часы движутся вверх и вниз при наведении на них курсора. Как человек, который явно любит дизайн (вы дочитали до этого места!), мы знаем, что вы захотите это проверить.
Ваш браузер не поддерживает это видеоPicsart
Создание таких вещей, как логотипы, графика для постов в социальных сетях и составление электронных писем, может оказаться сложной задачей, если у вас мало дизайнерских ноу-хау.
Picsart предлагает предприятиям простой в использовании инструмент для составления необходимых маркетинговых материалов.
Нам нравится завораживающее сияние цветов на этом макете. Но что превосходит этот дизайн, так это эффекты параллакса. Здесь нет ни одного скучного пространства, почти на каждой странице есть анимированные элементы, и все они двигаются интересным образом.
Галерея
Галерея , арт-пространство NFT, созданное Ripple, начинается с прекрасного параллакса. При наведении курсора на экран все эти красочные токенизированные цифровые произведения искусства перемещаются, в то время как текст и кнопка ввода остаются фиксированными. Размытие и снижение насыщенности на одном из слоев визуальных элементов еще больше усиливает ощущение объемности.
Хотя NFT могут сбивать с толку, если вы мало о них знаете, этот веб-сайт отлично демонстрирует, что делает их особенными в современном и уникальном веб-дизайне.
Создайте свой собственный веб-сайт Parallax
Независимо от того, умеете ли вы программировать или предпочитаете визуальное творчество, Vev упрощает создание иммерсивных интерактивных веб-сайтов. Чтобы начать работу, перетащите наши предварительно закодированные компоненты параллакса на свой холст — вы даже можете разместить у нас, когда будете готовы опубликовать свой проект для всего мира.
Подробнее
Ваш браузер не поддерживает это видеоВаш браузер не поддерживает это видео Получайте наш ежемесячный информационный бюллетень прямо на свой почтовый ящик.
Вы всегда можете отказаться от подписки в любое время.
Политика конфиденциальности
Хотите узнать больше?
Веб-сайт с прокруткой Parallax — примеры и объяснение
Parallax прочно обосновался в Интернете, привлекая все больше и больше дизайнеров, и является одним из направлений веб-дизайна. Этот эффект был впервые использован в анимации и видеоиграх, таких как Super Mario Bros.
Однако только в 2011 году он проник в Интернет с появлением HTML5. Благодаря незначительным манипуляциям с графическими элементами эффект параллакса может оживить дизайн и привлечь пользователя к историям, представленным на данном веб-сайте.
Что такое сайт с параллаксной прокруткой?
Типичный веб-сайт с эффектом параллакса — это тот, на котором фон веб-сайта движется медленнее, чем элементы на переднем плане . Визуальный эффект, которого мы можем добиться, создает впечатление движения и глубины, как будто между передним и задним планами есть пространство. В настоящее время дизайнеры используют параллакс для достижения различных эффектов, таких как увеличение или уменьшение компонентов, постепенное появление и исчезновение или вращение 2D- или 3D-элементов.
Примеры веб-сайтов с эффектом параллакса
Поскольку успех эффекта параллакса зависит от времени загрузки веб-сайта, он рекомендуется для небольших веб-сайтов. Это отличный способ продемонстрировать оригинальную целевую страницу для нового продукта, такого как новая модель обуви, хлопья для завтрака или новый автомобиль.
Для больших проектов рекомендуется тонкий параллакс, чтобы минимизировать нагрузку на сайт и не влиять на время загрузки. Дизайнеры и фронтенд-разработчики также используют параллаксы, чтобы продемонстрировать свой уровень знаний и богатое воображение.
1. TAG Heuer
Веб-сайт Tag Heuer — отличный пример использования параллакса для многоплановой презентации продукта — уникальных часов. Он использует 3D-модели, которые появляются, вращаются и реагируют на прокрутку веб-сайта . Таким образом, пользователь может ознакомиться с сильными сторонами представленного продукта. Типографика тоже интересна — крупные подписи дополняют презентацию продукта, делая ее похожей на телевизионную рекламу.
2. Meadlight
Веб-сайт Meadlight представляет собой приятную презентацию медового напитка. Параллакс использовался здесь несколькими способами. В дополнение к вращающейся бутылке, которая сопровождает нас на веб-сайте, дизайнеры также использовали параллакс в отношении типографики к фону .
Эти приемы делают веб-сайт очень легким, с огромным пространством между элементами.
3. Greenhouse Agency
Иногда эффект параллакса слегка осветляет веб-сайт. Это очень хороший прием, если дизайнер выбирает крупные графические элементы и выразительную типографику, как в случае агентства Greenhouse Agency, которое поддерживает бренды с помощью маркетинговой и торговой деятельности.
4. Okalpha
На сайте анимационной студии Okalpha дизайнеры использовали огромные геометрические элементы ярких цветов. Параллакс, с другой стороны, использовался как способ анимации геометрии, которая отступает по мере перемещения веб-сайта , освобождая место для текстов.
5. Longshot
Производственная студия Longshot Film использует горизонтальный параллакс для представления иллюстраций, создавая пространственный комикс. Это своеобразное меню ведет к портфолио работ художников. В случае с этим веб-сайтом параллаксы использовались на различных уровнях , вводя зрителя в атмосферу открытия новых элементов.
6. Балбесы
Сайт фильма Балбесы используют параллакс в нескольких плоскостях, а третья плоскость представляет собой неподвижный элемент, который не двигается. В слое со скрабами дизайнеры применили эффект масштабирования при прокрутке, что автоматически создает впечатление, что мы приближаемся к виду за ними . Кроме того, затухая, логотип уступает место слою с текстом. Эффекты такого типа очень легко создать, а участие пользователя гораздо больше.
7. Custo
Custo — классический сайт, посвященный презентации продукта — смарт-почтового ящика. Движение при прокрутке сайта очень тонкое, но это создает впечатление динамичного сайта и усиливает впечатление от качественной техники. Параллакс был использован для представления характеристик продукта . В левой части экрана отображаются виды приложения, а в правой части — описания функций. Таким образом, пользователь обращает больше внимания на ту информацию, которую хотят донести авторы сайта.
8. Porsche
Интересная идея использования параллакса — всевозможные исторические сайты, где основным элементом является таймлайн . Компания Porsche создала красивый веб-сайт, на котором представлены модели автомобиля, начиная с 1920. По мере того, как мы продвигаемся вниз по сайту, каждое наше движение открывает дальнейшие изображения, проходящие снизу, показывающие, как автомобили изменились за десятилетия. Предпосылкой успеха такого параллакса, несомненно, является то, что фотографии сделаны одинаково и объекты имеют одинаковый размер. Тогда у нас возникает ощущение замены продукта.
9. Антон и Ирэн
Перед визуальными художниками стоит очень сложная задача, когда они хотят представить свое портфолио в Интернете. Сайты, на которых они представляют себя и свои работы, должны демонстрировать безграничное воображение и чувство вкуса. Антон и Ирэн — художественные руководители — сделали сайт с использованием параллакса, который отдаляет их, как будто они представляют что-то на доске.
Тени позади их фигур и параллакс, перемещающий фигуры в стороны, создают прекрасное впечатление о пространстве позади и между ними.
10. Dior by Starck
Авторы этого сайта использовали параллакс, чтобы создать своеобразную историю создания уникального стула. Когда пользователи перемещаются по веб-сайту, они вовлекаются в историю с помощью появляющихся заголовков, источников света, текста и изображений . Все, что мы видим, это движущиеся друг против друга изображения и использование прозрачности.
11. Часы Blok
Это еще один веб-сайт, посвященный часам для детей. Дизайнеры использовали игру букв и решили привести их в движение с помощью параллакса. Для усиления эффекта художники использовали анимацию часов вместе с 3D-элементами, прокручивающимися относительно соседних абзацев. Это придает всему веб-сайту легкий, пространственный и даже трехмерный эффект.
Веб-сайт с прокруткой параллакса — сводка
Мы видели 11 веб-сайтов с различными приложениями параллакса.