Разное

Эффект параллакса: Эффективный параллакс / Хабр

10.03.1987

Содержание

Использование фокусировки для добавления глубины и перемещения в приложение — Windows apps

Twitter LinkedIn Facebook Адрес электронной почты

  • Статья
  • Чтение занимает 2 мин

Параллакс — это визуальный эффект, при котором элементы, расположенные ближе к зрителю, перемещаются быстрее элементов фона. Эффект параллакса создает ощущение глубины, перспективы и движения. В приложении UWP для создания эффекта параллакса можно использовать элемент управления ParallaxView.

Windows API библиотеки пользовательского интерфейса:класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

API платформы: класс ParallaxView, свойство VerticalShift, свойство HorizontalShift

Примеры

Коллекция WinUI 2

Если у вас установлено приложение

коллекции WinUI 2 , щелкните здесь, чтобы открыть приложение и увидеть ParallaxView в действии.

  • Получение приложения коллекции WinUI 2 (Microsoft Store)
  • Получить исходный код (GitHub)

Система Fluent Design позволяет создавать современные и эффективные пользовательские интерфейсы, которые отличаются яркостью, глубиной, движением, материальностью и масштабированием. Параллакс — это компонент системы проектирования Fluent Design, добавляющий движение, глубину и масштаб вашему приложению. См. сведения о системе проектирования Fluent Design.

Как это работает в пользовательском интерфейсе

В пользовательском интерфейсе можно создать эффекта параллакса, перемещая различные объекты с разной скоростью при горизонтальной или вертикальной прокрутке. Чтобы продемонстрировать, рассмотрим два уровня содержимого, список и фоновое изображение. Список размещается поверх фонового изображения, создавая ощущение, что список находится ближе к зрителю. Теперь, чтобы достичь эффекта параллакса, мы хотим, чтобы объект, ближайший к нам, перемещается «быстрее», чем объект, который находится дальше. Когда пользователь прокручивает интерфейс, список перемещается быстрее относительно фонового изображения, что создает иллюзию глубины.

Использование элемента управления ParallaxView для создания эффекта параллакса

Для создания эффекта параллакса используется элемент управления ParallaxView. Он привязывает положение прокрутки элемента переднего плана, например списка, к фоновому элементу, например изображению. При прокрутке элемента переднего плана он анимирует фоновый элемент, создавая эффект параллакса.

Чтобы использовать элемент управления ParallaxView, выберите элемент Source, фоновый элемент и установите для свойств VerticalShift (для вертикальной прокрутки) и/или HorizontalShift (для горизонтальной прокрутки) значения выше нуля.

  • Свойство Source принимает ссылку на элемент переднего плана. Чтобы добиться эффекта параллакса, объектом переднего плана должен быть объект ScrollViewer или элемент, содержащий объект ScrollViewer, например ListView или RichTextBox.

  • Чтобы задать фоновый элемент, добавьте его в качестве дочернего элемента управления ParallaxView. Фоновым элементом может быть любой объект UIElement, например изображение или панель, содержащая дополнительные элементы пользовательского интерфейса.

Для создания эффекта параллакса объект ParallaxView должен располагаться за элементом переднего плана.

Панели Grid и Canvas дают возможность располагать элементы слоями один над другим, поэтому они подходят для использования с элементом управления 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)

Как создать эффект параллакса с помощью Elementor

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

Параллакс — это эффект, который обязательно привлечет ваше внимание, и он действительно может выделить ваш сайт и сделать его профессиональным. Но можете ли вы добавить его на свой сайт WordPress с помощью Elementor, если вы мало знаете о технологиях?

Да, это ответ.

Параллакс — это встроенная функция Elementor Pro , но вы все равно можете использовать бесплатную версию Elementor для создания эффекта параллакса. Читайте дальше, чтобы узнать, как это сделать!

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Создайте параллакс с Elementor бесплатно

Чтобы создать эффект параллакса с помощью Elementor Free, сначала перейдите на панель инструментов WordPress. Просто нажмите «Добавить новый» на боковой панели, а затем обязательно нажмите «Редактировать с помощью Elementor».

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

В библиотеке Elementor я выбрал вариант «Домашняя страница – Study». Чтобы добавить весь шаблон на пустую страницу, просто наведите на него указатель мыши и нажмите «Вставить».

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

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

Чтобы создать собственный эффект параллакса в Elementor Free, вы должны использовать код или сторонний плагин. Ни один из этих методов не так эффективен, как то, что вы можете сделать с помощью Elementor Pro, но их должно быть достаточно для ваших нужд!

Код для параллакса

Прежде чем делать что-либо еще, вы должны подумать о том, какой вид вы хотите. Самый простой способ использовать параллакс — заставить несколько изображений или частей страницы прокручиваться с разной скоростью, чтобы они перекрывались.

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

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

Шаги довольно просты: любой код CSS помещается в Dashboard \ 003E Внешний вид \ 003E Настройка \ 003E Дополнительный CSS. Затем вам нужно добавить параллакс класса на вкладку «Дополнительно» для той части вашей страницы, на которой вы хотите иметь эффект параллакса.

Вы можете использовать « Фрагменты кода », чтобы вставить код JavaScript прямо туда.

Создайте параллакс с Elementor Pro

Теперь, если у вас есть Elementor Pro, платная версия Elementor, весь этот процесс намного проще и гибче. Поверьте мне!

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

В некотором смысле, вы можете думать о параллаксе как о перемещении множества разных вещей в трехмерном пространстве. Вот несколько вещей, которые вы можете сделать с альфа-прозрачными изображениями и различной скоростью прокрутки:

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

В дополнительных настройках есть поле Z-Index, позволяющее размещать элементы в определенном порядке. Чем ближе что-то к зрителю, тем выше число, и наоборот.

Навигатор, который находится внизу боковой панели в Elementor, позволяет легко увидеть эти слои.

Перейдите в Advanced > Motion Effects и нажмите на эффект, который вы хотите изменить, чтобы изменить скорость прокрутки этих элементов. Вы можете изменить скорость прокрутки, перемещая полосу.

Эффект параллакса на странице с Elementor Pro

В Elementor Pro теперь мы можем создавать собственные страницы с эффектами параллакса.

Я бы посоветовал вам начать с нажатия на значок шестеренки на боковой панели Elementor и убедиться, что для макета страницы установлено значение «Полная ширина Elementor».

Затем убедитесь, что хотя бы несколько частей вашей страницы настроены. Я использую дублеров, но вы поняли!

Чтобы настроить его, перейдите в раздел «Дополнительно» и включите «Эффекты прокрутки» в разделе «Эффекты движения». Вы можете выбрать один из нескольких интересных эффектов движения, основанных на прокрутке, которые вы можете увидеть ниже.

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

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

Вы можете использовать эффект движения «Размытие» для создания фотографий, которые начинаются нечетко и становятся более резкими, когда вы наводите на них указатель мыши, подобно снимку с глубиной резкости. Какой фантастический вид! При использовании размытия у вас есть возможность постепенного появления, исчезновения, исчезновения или появления и исчезновения, как и в случае с прозрачностью. Общий уровень эффекта также можно регулировать от 1 до 15.

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

Подведение итогов

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

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

Если вы экспериментировали с популярным эффектом параллакса в Elementor, поделитесь своими мыслями и предложениями. Кроме того, ознакомьтесь с другими нашими руководствами по elementor и не забудьте поделиться ими со своими друзьями-разработчиками.

ПАРАЛЛАКС • Большая российская энциклопедия

ПАРАЛЛА́КС (от греч. παράλλαξις – от­кло­не­ние) в ас­тро­но­мии, ве­ли­чи­на, рав­ная ви­ди­мо­му сме­ще­нию све­тил на не­бес­ной сфе­ре, обу­слов­лен­но­му пе­ре­ме­ще­ни­ем на­блю­да­те­ля в про­стран­ст­ве. Чем бли­же к на­блю­да­те­лю рас­по­ла­га­ет­ся не­бес­ное те­ло, тем силь­нее ме­ня­ет­ся на­прав­ле­ние на не­го при пе­ре­ме­ще­нии на­блю­да­те­ля. П. на­зы­ва­ют угол, под ко­то­рым с не­бес­но­го те­ла вид­но рас­стоя­ние, на ко­то­рое сме­ща­ет­ся на­блю­да­тель. Точ­но из­ме­рен­ные П. не­бес­ных све­тил и групп све­тил по­зво­ля­ют оп­ре­де­лять рас­стоя­ния до них.

Су­точ­ный па­рал­лакс $p_с$ вы­ра­жа­ет из­ме­не­ние на­прав­ле­ния на не­бес­ное те­ло при во­об­ра­жае­мом пе­ре­ме­ще­нии на­блю­да­те­ля с по­верх­но­сти в центр Зем­ли или об­рат­но: $\sin p_с=(R/r) \sin z$, где $R$ – рас­стоя­ние от на­блю­да­те­ля до цен­тра Зем­ли, $r$ – рас­стоя­ние от не­бес­но­го те­ла до цен­тра Зем­ли, $z$ – зе­нит­ное рас­стоя­ние не­бес­но­го те­ла. П., оп­ре­де­лён­ный для на­блю­да­те­ля, рас­по­ло­жен­но­го на эк­ва­то­ре, и не­бес­но­го те­ла, на­хо­дя­ще­го­ся на го­ри­зон­те ($z= 90°$), на­зы­ва­ет­ся су­точ­ным го­ри­зон­таль­ным П. Наи­боль­ший су­точ­ный го­ри­зон­таль­ный П. име­ет Лу­на – от $54′$ до $61′$. Важ­ным па­ра­мет­ром яв­ля­ет­ся су­точ­ный го­ри­зон­таль­ный П. Солн­ца $π_☉=8,80″$, по­сколь­ку его ве­ли­чи­на по­зво­ля­ет оп­ре­де­лить рас­стоя­ние до Солн­ца че­рез эк­ва­то­ри­аль­ный ра­ди­ус Зем­ли. Ве­ли­чи­на $π_☉$, од­но­знач­но свя­зан­ная с ас­тро­но­мич. еди­ни­цей, рань­ше рас­смат­ри­ва­лась в ка­че­ст­ве од­ной из фун­дам. ас­тро­но­мич. кон­стант.

Для из­ме­ре­ния рас­стоя­ний до тел, на­хо­дя­щих­ся вне Сол­неч­ной сис­те­мы, ис­поль­зу­ет­ся го­дич­ный па­рал­лакс. Это угол $p_г$, под ко­то­рым с не­бес­но­го те­ла ви­ден ба­ри­цен­три­че­ский (с на­ча­лом в ба­ри­цен­тре $O_б$ Сол­неч­ной сис­те­мы) ра­ди­ус-век­тор $\boldsymbol{R}_б$ цен­тра масс сис­те­мы Зем­ля – Лу­на: $\sin p_г=(R_б/r_б)\sin E$, где $r_б$ – рас­стоя­ние от не­бес­но­го те­ла до $O_б$, $E$ – угол ме­ж­ду век­то­ром $\boldsymbol{R}_б$ и на­прав­ле­ни­ем на не­бес­ное те­ло из цен­тра масс сис­те­мы Зем­ля – Лу­на. Ес­ли угол $E$ пря­мой, то та­кой П. на­зы­ва­ет­ся три­го­но­мет­ри­че­ским па­рал­лак­сом $p_т$. По­сколь­ку П. бли­жай­ших звёзд не пре­вы­ша­ет $1″$ , то $\sin p_т ≈ p_т$ и $p_т=R_б/r_б$. Т. о., оп­ре­де­ле­ние три­го­но­мет­рич. П. эк­ви­ва­лент­но оп­ре­де­ле­нию рас­стоя­ния до не­бес­но­го те­ла, ко­то­рое мо­жет быть вы­ра­же­но че­рез $R_б$, при­мер­но рав­ное 1 а. е.

Все звёз­ды в ок­ре­ст­но­стях Солн­ца об­ла­да­ют па­рал­лак­тич. дви­же­ни­ем, от­ра­жаю­щим факт дви­же­ния Солн­ца от­но­си­тель­но цен­тра Га­лак­ти­ки. Ве­ли­чи­на $p_s=R_s/r_s$ на­зы­ва­ет­ся ве­ко­вым па­рал­лак­сом, где $R_s$ – путь, прой­ден­ный Солн­цем за год, $r_s$ – рас­стоя­ние до звез­ды.

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

Ус­пеш­ное вы­пол­не­ние кос­мич. про­ек­та HIPPARCOS (High Precision Parallax Collecting Satellite, 1989–93, Ев­роп. кос­мич. агент­ст­во) по­зво­ли­ло соз­дать вы­со­ко­точ­ный ка­та­лог П. ок. 120 тыс. звёзд и по­лу­чить цен­ней­шую ин­фор­ма­цию о про­стран­ст­вен­ном рас­пре­де­ле­нии этих звёзд в бли­жай­шей ок­ре­ст­но­сти Солн­ца (до 1 кпк). В 2013 за­пу­щен кос­мич. те­ле­скоп GAIA (Global Astrometric Interferometer for Astrophysics), цель ко­то­ро­го – из­ме­ре­ние ко­ор­ди­нат и П. ок. 1 млрд. звёзд, что по­зво­лит по­стро­ить трёх­мер­ную кар­ту поч­ти всей Га­лак­ти­ки.

Для оцен­ки рас­стоя­ний до очень да­лёких объ­ек­тов ис­поль­зу­ют­ся ме­нее точ­ные (по срав­не­нию с гео­мет­ри­че­ски­ми) ме­то­ды: оп­ре­де­ле­ние т. н. спек­траль­но­го П., груп­по­во­го П. и ста­ти­стич. П. Пер­вый ме­тод ос­но­вы­ва­ет­ся на за­ко­не, ут­вер­ждаю­щем, что по­ток све­та от из­лу­чаю­ще­го ис­точ­ни­ка убы­ва­ет об­рат­но про­пор­цио­наль­но квад­ра­ту рас­стоя­ния до не­го. Оп­ре­де­лив спек­траль­ный класс и класс све­ти­мо­сти звез­ды, мож­но оце­нить её ис­тин­ную све­ти­мость (аб­со­лют­ную звёзд­ную ве­ли­чи­ну). За­тем, срав­ни­вая аб­со­лют­ную звёзд­ную ве­ли­чи­ну с ви­ди­мой и учи­ты­вая меж­звёзд­ное по­гло­ще­ние све­та, мож­но оце­нить рас­стоя­ние до звез­ды.

В ме­то­де груп­по­во­го П. из­ме­ря­ют­ся собств. дви­же­ния звёзд, вхо­дя­щих в ско­п­ле­ние, а по ним – по­ло­же­ние ра­ди­ан­та ско­п­ле­ния (точ­ки, в ко­то­рой пе­ре­се­ка­ют­ся на­прав­ле­ния собств. дви­же­ний звёзд ско­п­ле­ния при про­дол­же­нии их на не­бес­ной сфе­ре). Ес­ли из­вест­ны лу­че­вые ско­ро­сти звёзд (из­ме­рен­ные на ос­но­ва­нии До­п­ле­ра эф­фек­та), то, зная собств. дви­же­ния звёзд и их уг­ло­вое рас­стоя­ние до ра­ди­ан­та, мож­но рас­счи­тать рас­стоя­ние до ка­ж­дой звез­ды дви­жу­ще­го­ся ско­п­ле­ния и ср. рас­стоя­ние до ско­п­ле­ния.

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

Как создать удивительный эффект параллакса

Вероятно, вы открыли веб-сайт игры Firewatch или веб-сайт Apple и узнали, как на этих веб-сайтах создаются эффекты прокрутки. Сегодня вам повезло, потому что я собираюсь показать вам, как создать эти эффекты, называемые эффектом параллакса.

Проект

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

Этот простой прием интересен тем, что его можно применять практически в любом виде взаимодействия на обычном веб-сайте.

Что такое эффект параллакса?

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

Некоторые примеры эффекта параллакса…

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

Но Firewatch — прекрасный пример простого эффекта параллакса. У вас есть несколько изображений в качестве фона, и каждый фон движется с разной скоростью.

Для создания этого проекта я буду использовать React, Typescript, react-spring и tailwind. В пакете React-spring есть поддержка параллакса, и он сделает за нас всю тяжелую работу. Tailwind — это библиотека CSS, в которой используются основные принципы полезности, которые мы можем использовать для быстрого оформления нашего проекта.

Прежде чем мы начнем, давайте взглянем на финальный проект.

Финальный проект.

Project

Сначала нам нужно создать проект React:

 ➜ yarn create vite react-parallax

Выберите React в качестве фреймворка, а затем react-ts в качестве варианта:

 ✔ Выберите фреймворк: › react 
 ✔ Выберите вариант: › react-ts

Единственный пакет, который нам понадобится, это react-spring/parallax:

 ➜ yarn add @react-spring/parallax

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

Для добавления попутного ветра через CDN необходимо открыть файл index.html и добавьте следующий тег внутри

:

Весь файл должен выглядеть именно так :

  
  
  
  
  
  
  
 Приложение Vite 
  
  
 
 
 < script type="module" src="/src/main.tsx">

Еще одно, создайте файл .editorconfig в корне проекта :

 ➜ коснитесь .editorconfig # Чтобы создать файл

Добавьте следующее содержимое в файл .editorconfig :

 root = true [*] 
 charset = UTF-8 
 END_OF_LINE = LF 
 indent_size = 2 
 indent_style = Space 
 insert_final_newline = false 
 MAX_LINE_LENTE для нашего проекта с помощью простого файла.  Если вы хотите узнать больше о  Editorconfig , посетите веб-сайт https://editorconfig.org/. 
 
 Для завершения настройки проекта: 
 
     
  •  удалите   index.css   и   App.css  , потому что мы собираемся использовать Tailwind напрямую в HTML. 
    •  
 
 После установки  react-spring  и  Tailwindcss  последнее, что вам понадобится, это активы, которые мы собираемся использовать. Есть 7 изображений, разбитых на слои. 
 
 Они разбиты на слои, поэтому мы можем анимировать скорость каждого слоя с другим значением. 
 
 Чтобы загрузить активы, вы можете просто загрузить активы из  github  или клонируйте полный репозиторий  github  и перейдите в ветку  start-here , чтобы следовать руководству. 
 
  Только активы:  
 
 react-tree-parallax/src/assets at main · itsbetma/react-tree-parallax 
 
 
 Проект ReactJS с использованием react-spring/parallax.
  Внесите свой вклад в разработку betma/react-tree-parallax, создав…  
 
 github.com 
 
  Полный репозиторий:  
 
 GitHub — itsbetma/react-tree-parallax: проект ReactJS с использованием react-spring/parallax. 
 
 
 Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли из системы на другой вкладке или… 
 
 
 github.com 
 
 После клонирования репозитория ваш проект должен выглядеть так: 
 Файлы 
 Во-первых, давайте импортируем наши зависимости: 
 
 import layer1 from './assets/layer-01 .png'; 
 импортировать слой 2 из './assets/layer-02.png'; 
 импортировать слой 3 из './assets/layer-03.png'; 
 импортировать слой 4 из './assets/layer-04.png'; 
 импортировать слой 5 из './assets/layer-05.png'; 
 импортировать layer6 из './assets/layer-06.png'; 
 импортировать слой 7 из './assets/layer-07.png'; 
 импорт {IParallax, Parallax, ParallaxLayer} из "@react-spring/parallax"; 
 import { useState } from 'react'; function App() {return ( 
 
 
 App 
 
 
 ) 
 } export default App 
  className={'w-full h-full'}  используется для определения двух классов T  ailwindcss .
  •   w-full  : то же, что и  width:100%  ;
  •   h-полный  : то же, что и  height:100%  ;
 Теперь нам нужно добавить наш первый слой. Первый слой — это  layer7 , потому что порядок в анимации инвертирован, первый слой отображается на заднем плане, а последний слой отображается на переднем плане.
 Добавьте следующий код:
 function App() {return ( 
 
 
  
  offset={0} 
 speed={0.5} 
 factor={2} 
 style={{ 
 backgroundImage: `url(${layer7})`, 
 backgroundSize: 'cover', 
 backgroundPosition: 'center' 
 }} 
 >  
 
 
 ) 
 } 
  Объяснение кода: 
  •     — Определить количество страниц, в данном случае  1.45 страниц  ;
  •    — Определить свойства слоя;
  Свойства слоя: 
  •   offset  — смещение слоя, когда соответствующая страница полностью видна (например: 0 => верх 1-й страницы, 1 => верх 2-й страницы и т. д.). По умолчанию 0.
  •   скорость  — Скорость, с которой слой перемещается по отношению к прокрутке. Может быть положительным или отрицательным. По умолчанию 0,
  •   factor  — Размер слоя относительно размера страницы (например: 1 => 100%, 1.5 => 150% и т. д.). По умолчанию 1.
  •   стиль  — свойства css слоя.
 Теперь запустите:
 yarn dev 
 И проверьте, показывает ли он изображение луны.  localhost:3000 
 Только луна.
 Теперь добавим слой  Stars . В файле  App.tsx  добавьте ниже  layer7  следующий код:
  offset={0} 
 speed={0.8} 
 factor={2} 
 style={{ 
 backgroundImage: `url(${layer6})`, 
 backgroundSize: 'cover', 
 backgroundPosition: ' center' 
 }} 
 > 
 Результат добавления  звезд  .
 Stars
 Уже можно увидеть эффект параллакса в действии. Чтобы продолжить и не терять время, давайте добавим в анимацию больше слоев.
 Приведенный ниже код добавляет еще три слоя изображений:
  offset={0.9999} 
 speed={1.5} 
 factor={1.1} 
 style={{ 
 backgroundImage: `url(${layer5})`, 
 backgroundSize: 'cover', 
 backgroundPosition: 'center' 
 }} 
 > 
  offset={0.9999} 
 speed={3} 
 factor={2.1} 
 style={{ 
 backgroundImage: `url(${layer4})` , 
 backgroundSize: 'cover', 
 backgroundPosition: 'center' 
 }} 
 > 
 offset={0} 
 speed={2} 
 factor={4} 
 style={{ 
 backgroundImage: `url(${layer3})`, 
 backgroundSize: 'contain', 
 backgroundPosition: 'center ' 
 }} 
 > 
 После добавления этих трех слоев вы можете увидеть деревья, отображаемые в анимации: скорость. Луна, например, простирается от начала до конца, а деревья появляются только на заключительном этапе.
 Осталось только два изображения, вы можете добавить  предпоследнее изображение  с помощью:
  offset={0.87} 
 speed={1} 
 factor={1} 
 style={{ 
 backgroundImage : `url(${layer2})`, 
 backgroundSize: 'cover', 
 backgroundPosition: 'center' 
 }} 
 > 
 Проверка  localhost:3000  можно увидеть  всухую кусты  в анимации.
 Сухие кустарники.
 Наконец, мы можем добавить  Ground  :
  offset={0.9} 
 speed={1} 
 factor={1} 
 style={{ 
 backgroundImage: `url(${layer1})`, 
 backgroundSize: 'cover' , 
 backgroundPosition: 'center' 
 }} 
 > 
Земля.
 Анимация прокрутки готова, осталось добавить последний штрих. В качестве последнего штриха мы можем создать кнопку для перехода от начала анимации к концу и наоборот.
 Для этой функции мы можем использовать React  useState  и react-spring/parallax  ref  для управления индексом страницы.
 Добавьте переменную для хранения ссылки на реактивную пружину/параллакс:
 ... function App() { 
 let element: IParallax | null... 
 Чтобы сохранить значение кнопки, добавьте следующее  useState  :
 ... function App() { 
 let element: IParallax | null const [buttonMessage, setButtonMessage] = useState('Down')... 
 Для обработки нажатия кнопки добавьте функцию ниже:
 ...const handleClick = () => { 
 if (buttonMessage === 'Down') { 
 setButtonMessage('Up') 
 element?.scrollTo(2) 
 } 
 if (buttonMessage === ' Up') { 
 setButtonMessage('Down') 
 element?.scrollTo(0) 
 } 
 }... 
 Наконец, создайте следующий код JSX:
 . 
 . 
 . 
 . 
 // Слой 2 
 // Слой 1 sticky={{ start: 0, end: 1 }} 
 speed={10} 
 factor={1} 
 onClick={() => handleClick()} 
 > 
 
 
 
 
 
 

 {buttonMessage} 
  
 
 
 < /div> 
  
 Здесь мы используем другое свойство для этого слоя, свойство  sticky .  sticky  используется для определения начального и конечного положения слоя, это хорошо для таких случаев, как кнопка Вниз/Вверх, потому что я хочу, чтобы она находилась в одном и том же положении.
 Обновите компонент    до:
  element = ref}> 
 Конечный результат:
 Окончательный проект.
 На данный момент вы создали полнофункциональную веб-страницу с эффектом параллакса.
 Хотите статью о чем-то другом? Не ждите, оставьте комментарий ниже, и я буду работать над этим.
  Если вам нравится контент о Git, Linux, советах по повышению производительности, Typescript и Python, подписывайтесь на меня на Medium   Marco Antonio Bet   . 
  Если вы считаете эту статью полезной, поделитесь ею с друзьями, сохраните ее на потом и поставьте 👏. 
 До скорой встречи.
 GitHub — itsbetma/react-tree-parallax: проект React для учебника по реакции-спрингу/параллаксу.
 Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или… 
 github.com
  Git очень важен в жизни инженера-программиста, и, думая об этом, я написал несколько статей об этом: 
 Производительность с псевдонимами Git день, когда я начал работать над своей настоящей работой, и это была первая работа, в которой мне нужно было использовать git… 
 blog.devgenius.io
 Git Advanced Topics Part One 
 Прошел год с тех пор, как я начал использовать git и в этой статье я хочу научить некоторым из моих продвинутых методов работы с git. 
 blog.devgenius.io
 Расширенные темы Git, часть вторая 
 Продолжая более сложные темы, мы рассмотрим reflog, bisect, search, find и, наконец, подмодули git. 
 blog.devgenius.io
 Не забудьте проверить мою страницу на Medium: 
 Marco Antonio Bet - Medium 
 Прочитайте письмо от Marco Antonio Bet на Medium.
 Веб-разработчик. Каждый день Марко Антонио Бет и тысячи других…
 medium.com
 Дизайны, темы, шаблоны и графические элементы с эффектом параллакса, загружаемые на Dribbble 
  1.  View Collab — набор целевых страниц II
     Collab — Комплект целевых страниц II
     
  2.  Просмотр концепции целевой страницы с эффектом параллакса
     Концепция целевой страницы с эффектом параллакса
  3.  Посмотреть в прямом эфире - Портфолио Энди Харди
     
     ПРЯМОЙ ЭФИР - Портфолио Энди Харди
  4.  Посмотреть Спортсмен Аста Веб-дизайн и разработка
     Спортсмен Аста Веб-дизайн и разработка
  5.  
     Просмотр захватывает дух.
     Захватывает дух.
  6.  View Parallax Swipe Mobile UI — электронная коммерция
     Мобильный интерфейс Parallax Swipe — электронная коммерция
  7.  Посмотреть Корец. Целевая веб-страница с иллюстрациями
     Корец. Целевая веб-страница с иллюстрациями
  8.  Просмотр домашней страницы Веб-дизайн для Ecodenta
     Веб-дизайн домашней страницы для Ecodenta
  9.  Просмотр веб-сайта о путешествиях
     дорожная лента
  10.  Посмотреть очки виртуальной реальности / AE-13
     Очки виртуальной реальности / AE-13
  11.  Просмотр Лети высоко.
     Летать высоко.
  12.  Посмотреть веб-дизайн Eskafil — взаимодействие с параллаксом
     Веб-дизайн Eskafil — взаимодействие с параллаксом
  13.  Посмотреть веб-сайт доставки еды
     Сайт доставки еды
  14.  Посмотреть адаптацию для приложения Mountain Trip
     Регистрация для приложения Mountain Trip
  15.  Просмотр веб-сайта портфолио - темный режим при наведении курсора
     Веб-сайт портфолио — темный режим при наведении курсора
  16.  Посмотреть веб-дизайн Eskafil
     Веб-дизайн Eskafil
  17.  Просмотр анимации эффекта параллакса
     Анимация эффекта параллакса
  18.  Просмотр веб-дизайна для Ecodenta - внутренняя страница продукта
     Веб-дизайн для Ecodenta — внутренняя страница продукта
  19.  Просмотр эффекта умножения параллакса
     Умножение эффекта параллакса
  20.  Посмотреть ортальную концепцию
     Православная концепция
  21.  Посмотреть целевую страницу MedHouse
     Целевая страница MedHouse
  22.  Посмотреть веб-сайт гидротехники
     Веб-сайт Water Engineering
  23.  Посмотреть северную целевую страницу
     Северная посадочная страница
  24.  Посмотреть параллакс оленя в комплекте Torus
     Комплект Deer Parallax in Torus
 Зарегистрируйтесь, чтобы продолжить
или войдите в систему
 Идет загрузка еще. ..
 Проектирование с помощью прокрутки параллакса: что можно и чего нельзя делать 
 Прокрутка параллакса — это творческий инструмент для дизайнеров, позволяющий создавать трехмерные изображения на двухмерном экране. Эффект прокрутки параллакса может добавить глубину и размерность, давая пользователю захватывающий и увлекательный опыт — то, к чему бренды постоянно стремятся!
 Параллаксная прокрутка — это метод веб-дизайна, при котором элементы кажутся движущимися с разной скоростью для создания эффекта трехмерной прокрутки.
  Подобно восприятию глубины при вождении автомобиля, когда близкие объекты проносятся мимо автомобиля быстро, а предметы на расстоянии проходят медленнее. 
 Существует несколько типов шаблонов прокрутки параллакса, но все они используют отдельные слои контента для получения желаемого эффекта. Задавая разные скорости прокрутки для каждого слоя, дизайнеры создают иллюзию перемещения объектов по экрану при прокрутке пользователем.
 Хотите создать прокрутку параллакса в своем дизайне? В UXPin это просто! Получите 14-дневную пробную версию и узнайте, как это сделать быстро.
 Краткая история параллаксной прокрутки 
 Параллаксная прокрутка восходит к 1930-м годам как технология создания анимационных фильмов, таких как диснеевский  «Белоснежка и семь гномов»  . В начале 1980-х дизайнеры видеоигр использовали параллаксную прокрутку для создания 3D-эффектов для 2D-игр, в первую очередь  Jump Bug 1981 года  .
 Только в 2007 году параллаксная прокрутка дебютировала в веб-дизайне с использованием Javascript и CSS 2 в Internet Explorer 6. С появлением в 2011 году HTML5 и CSS 3 эффекты параллаксной прокрутки стало проще создавать, и поэтому их популярность возросла.
 Сегодня прокрутка параллакса может быть невероятно сложной, когда веб-дизайнеры создают захватывающий визуальный опыт.
 Несмотря на то, что это очень эффективный инструмент для создания уникальных пользовательских интерфейсов, дизайнеры должны учитывать недостатки параллаксной прокрутки — она может иметь неблагоприятные последствия!
 Скорость страницы 
 Параллаксная прокрутка — это убийца скорости страницы, особенно для веб-сайтов на тарифных планах общего хостинга. По данным Google, две секунды — это порог для сайтов электронной коммерции. Но для большинства других веб-сайтов среднее значение составляет от 3 до 6 секунд.
 Итак, когда дело доходит до электронной коммерции, каковы ваши цели? Чтобы произвести впечатление на пользователя своими навыками веб-дизайна или продавать товары? Если вы не можете оптимизировать скорость своей страницы, вы можете избежать прокрутки параллакса для электронной коммерции или веб-сайтов, где скорость имеет значение.
  Ознакомьтесь с этой статьей   о том, как повысить скорость страницы для прокрутки параллакса   . 
 Как это влияет на контент? 
 Еще один вопрос, который вы должны задать перед добавлением эффекта прокрутки параллакса:  как это влияет на содержание? 
 Например, на веб-сайте Collage Crafting дизайнеры решили добавить эффект параллакса для точек продаж.
 Но часть контента трудно читать, так как он обрезается сверху и снизу при прокрутке. Это не очень хороший пользовательский опыт, поскольку пользователь не может правильно использовать весь контент.
 Если вам нужно, чтобы пользователи читали ваш контент, будьте проще! Есть и другие способы, которыми дизайнеры могут представить контент пользователям и при этом сохранить удобочитаемость.
 Эффект параллаксной прокрутки отвлекает или раздражает пользователя? 
 Параллаксная прокрутка имеет свое место. Для креативного агентства имеет смысл произвести впечатление на потенциальных клиентов своими навыками веб-дизайна.
 Но если я ищу расценки на страхование автомобиля, действительно ли я хочу тратить время на прокрутку какого-то причудливого эффекта параллакса, чтобы добраться до формы расценки? Возможно нет!
 В конкурентных отраслях, где пользователям нужна быстрая информация, прокрутка параллакса может отрицательно сказаться на показателях отказов и конверсиях.
 Всегда думайте о содержании, контексте и о том, как веб-сайт пытается обслуживать пользователя.
 Мы нашли десять отличных примеров прокрутки параллакса. Одна тема, которая выделяется на большинстве этих веб-сайтов, — это то, как дизайнеры использовали параллакс, чтобы помочь рассказать историю.
 Как вы увидите из этих примеров, параллакс может быть мощным инструментом повествования, но он требует тщательного обдумывания и планирования.
 НИИКА 
 НИИКА — австралийское креативное агентство. Изображение героя имеет красивый абстрактный дизайн с небольшим движением. Абстрактные объекты перемещаются по странице, а большие движущиеся заголовки отображают услуги агентства по мере прокрутки.
 Еще один эффект прокрутки параллакса использует настраиваемую карту, зафиксированную в фоновом режиме, с контактной информацией агентства, прокручиваемой вверху.
 НИИКА также использует эффект параллакса для призыва к действию «РАБОТАЙТЕ С НАМИ» в футере.
 Несмотря на то, что НИИКА использует много текста при параллаксной прокрутке, вы никогда не потеряете важную информацию или сообщения.
 CANN 
 CANN — американский производитель тонизирующих напитков на основе каннабиса. На веб-сайте используется захватывающий бесшовный эффект прокрутки параллакса, чтобы рассказать историю своего бренда.
 Разработчики проделали фантастическую работу по оптимизации веб-сайта CANN, чтобы обеспечить такой сложный эффект прокрутки параллакса.
 Копия и содержание разборчивы, а эффект параллакса помогает рассказать историю бренда, дополненный пузырьками, представляющими шипучий тоник. В веб-дизайне также эффективно используется цвет для представления трех вкусов CANN.
 Веб-дизайнеры также проделали фантастическую работу с магазином CANN, отказавшись от причудливых эффектов, чтобы оптимизировать дизайн для повышения конверсии.
 Toy Fight 
 Toy Fight — британское креативное агентство. Веб-сайт имеет простой, но элегантный эффект прокрутки параллакса на главной странице с четким призывом к действию, появляющимся в центре страницы.
 Toy Fight использует эффект параллакса на каждой странице для перехода от героя к содержимому страницы. Эти переходы умны, потому что анимация несколько глуповата, в то время как остальная часть контента объясняет услуги компании и прошлую работу — почти как отодвигание занавеса.
 Веб-сайт Toy Fight — фантастический пример того, как параллаксная прокрутка может помочь рассказать историю.
 Garden 
 Garden — отмеченная наградами португальская студия дизайна. Веб-сайт использует красивый эффект параллакса для главного изображения заката в саду с заходящим солнцем, когда вы прокручиваете страницу.
 Ниже при прокрутке отображаются линии и значки, как если бы они были нарисованы. Тонкие эффекты привлекают внимание к важной информации, такой как услуги и заголовки Garden.
 Smart Move 
 Smart Move — это инициатива по привлечению и сохранению опыта в районе Большого Эребру в Швеции. Главная страница веб-сайта имеет впечатляющий эффект горизонтальной прокрутки параллакса, демонстрирующий особенности и культуру Örebro с соответствующими ссылками на каждую из них.
 Эффект параллакса ловко проведет вас через несколько шведских мест, включая природу, торговлю, домашнюю жизнь, развлечения и ночную жизнь.
 Вина Бертани 
 Бертани — итальянский винодел. Веб-сайт имеет эффект горизонтального параллакса с изображениями, видео и текстом, чтобы рассказать историю бренда.
 Эффект использует сочетание горизонтального и вертикального движения, чтобы перенести вас в путешествие по бренду, его винограднику и винам. Дизайнерам Bertani удалось сбалансировать сложный эффект горизонтального параллакса с захватывающим повествованием. Все имеет смысл, и сообщения выделяются.
 Quentin Goupille 
 Quentin Goupille — внештатный арт-директор, иллюстратор и режиссер из Парижа. В его портфолио используются эффекты прокрутки параллакса, чтобы помочь рассказать историю каждого проекта.
 Каждая страница уникальна, и Квентин использует эффекты параллакса, чтобы отправить пользователя в путешествие по каждому из его фильмов. Результат впечатляет, поскольку он помогает продемонстрировать рассказ Квентина и его творческий потенциал.
 Веб-сайт Квентина Гупиля — отличный пример того, как креативщики могут использовать эффекты параллакса, чтобы продемонстрировать свою работу уникальным и привлекательным способом.
 Без ума от яиц 
 Без ума от яиц Голландская ферма, занимающаяся выращиванием яиц, увлечена свободным выгулом и заботится о том, чтобы их цыплята жили здоровой фермерской жизнью.
 Веб-сайт использует тонкие эффекты прокрутки параллакса для добавления небольших элементов и подзаголовков. Коробки для яиц компании остаются статичными, когда вы прокручиваете страницу до половины, в то время как преимущества продукта прокручиваются с обеих сторон.
 Это невероятно творческий способ сохранить узнаваемость бренда и ознакомить пользователя с продуктом. В следующий раз, когда пользователь окажется в супермаркете, он, скорее всего, узнает упаковку Crazy About Eggs.
 Кибана 
 Кибана — курорт во Франции с номерами, помещениями для мероприятий, садами, рынком и другими развлечениями на свежем воздухе.

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

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