Параллакс эффект как сделать: Как сделать параллакс — Блог HTML Academy

Разное 

Содержание

javascript — Как сделать параллакс показа текста в css?

Вопрос задан

Изменён 2 года 3 месяца назад

Просмотрен 191 раз

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

  • javascript
  • html
  • css
  • svg

2

Решить задачу можно с помощью анимации маски SVG.

  1. Нижний слой будет красный прямоугольник с текстом.
  2. Верхний слой будет фиолетовый прямоугольник, к которому применена маска с набором окружностей, у которых fill="black" При закраске чёрным цветом маска прорезает верхний слой и становится виден нижний красный слой сквозь эти отверстия.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
        <!-- Маска -->
   <mask>
    <rect fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>       
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  />  
 
</svg>

Теперь можно сделать параллакс

Для этого нужно просто двигать маску:

#1. Горизонтальный параллакс

Начало анимации после клика

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;400 0"
        fill="freeze"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#2. Вертикальный параллаксм

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;0 100"
        fill="freeze"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#3. Вертикальный параллакс с возвратом

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;0 100;0 100;0 0;0 0"
        repeatCount="indefinite"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

Update

Анимация движения текста

В этих примерах маска неподвижна, двигается сам текст

#1. По горизонтали

<!-- Анимация движения текста -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="6s"
        values="0 0;300 0;0 0"
        fill="freeze"
        restart="whenNotActive" />  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
  
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
              
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
     <!-- Анимация движения текста -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.
 
 click"
        dur="6s"
        values="0 0;300 0;0 0"
        fill="freeze"
        restart="whenNotActive" />  
    </text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#2. По вертикали

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
  
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
              
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
     <!-- Анимация движения текста по вертикали -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.

  
 
 click"
        dur="4s"
        values="0 0;0 50;0 -30"
        fill="freeze"
        restart="whenNotActive" />  
    </text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Эффектная параллакс анимация в Figma — пошаговое руководство

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

  • Параллакс анимация в Figma
  • Что будет в этом уроке
  • Что такое параллакс эффект в веб-дизайне
  • Подготовка рабочего пространства в Figma, выбор фрейма
  • Исходники
    • Поиск изображений
    • Подготовка композиции в Photoshop
  • Размещение элементов на фрейме в Figma
  • Создание анимации первого экрана
    • Копируем Frame
    • Сдвигаем объекты шапки первого фрейма
    • Режим Prototype
    • Настраиваем анимацию
    • Тестируем анимацию
    • Настраиваем режим просмотра прототипа
    • Настраиваем появление всех элементов первого экрана
    • Тестируем анимацию первого экрана
  • Создание интерактивной анимации
    • Настраиваем появление элементов третьего фрейма
    • Связываем второй и третий фрейм в режиме Prototype и настраиваем анимацию
    • Настраиваем обратную связь для возврата на предыдущий фрейм
  • Финальный результат

Параллакс анимация в Figma

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

Что будет в этом уроке

Мы сделаем такой красивый, эффектный и простой параллакс эффект:

Что такое параллакс эффект в веб-дизайне

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

Подготовка рабочего пространства в Figma, выбор фрейма

На основной панели инструментов Figma или с помощью клавиши F выберите нужный вам Frame — то рабочее пространство, где вы будете работать над созданием проекта.

Выбор фрейма на основной панели инструментов

Я выбрал для примера фрейм iPhone 11 Pro Max с размерами 414 х 896.

Рабочее пространство в Figma готово

Исходники

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

Поиск изображений

Изображения можно добыть разными способами. Например, купить в фотобанке или сфотографировать самому. Мы пойдем простым и быстрым путем — воспользуемся бесплатными из Unsplash и Pexels. Для создания нашей композиции понадобятся фотографии гор, облаков и каких нибудь объектов на передний план — например, вагончика канатной дороги.

Мои фотографии для создания параллакс эффекта

Подготовка композиции в Photoshop

Дальше вырежем нужные фрагменты в фотошопе и создадим из них композицию с размером фрейма, который мы выбрали в Фигме. Это можно сделать с помощью любой техники обтравки: лассо, волшебная палочка, маски, каналы и так далее. Просто вырезаем нужный фрагмент и размещаем его на новом слое Photoshop (Ctrl+J).

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

Точно так же с помощью лассо и каналов создается подвесной вагончик.

Отделение вагончика от фонового изображения

Исходник для основной части облаков вырезать не пришлось, потому что нашлась фотография сразу с прозрачным фоном. Когда основные элементы готовы, создаем новый фрейм (артборд) в Photoshop с размерами 414 х 896 и переносим туда все вырезанные фрагменты:

Готовая композиция в Photoshop

Сохраняем отдельно каждый слой в формате PNG и переходим в фигму, у меня получилось 8 PNG файлов:

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

Размещение элементов на фрейме в Figma

Теперь все полученные PNG изображения нужно аккуратно разместить на созданном ранее рабочем пространстве в Figma.

Повторяем композицию в Figma

Возьмите за правило давать четкие и простые названия слоям, чтобы при работе с ними было проще ориентироваться в созданной композиции.

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

Добавление элементов — логотип, бургер меню и надпись

Frame готов, можно приступать к созданию анимации первого экрана.

Создание анимации первого экрана

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

Копируем Frame

Для создания анимации появления первого экрана понадобится копия фрейма — зажмите мышкой левый верхний угол фрейма и потяните его вправо с зажатой клавишей Alt.

Создание копии первого фрейма

Анимация в Figma работает следующим образом: фрейм проекта дублируется и на первом фрейме вносятся изменения, например можно передвинуть логотип и меню наверх. Затем с помощью режима Prototype создается связка со вторым фреймом и настраивается интерактив, то есть то как первый фрейм взаимодействует со вторым. Итог анимации в данном случае будет плавное появление логотипа и меню. Анимация в Figma это переключение между фреймами, здесь нет ключевых кадров как например в After Effects.

Сдвигаем объекты шапки первого фрейма

Убираем логотип и бургер меню вверх, за пределы фрейма:

Сдвигаем логотип и бургер меню на первом фрейме

Тут есть один нюанс: когда выносишь элемент за пределы фрейма то он выносится из фрейма и на панели слоев.

Объекты вынесены за пределы фрейма на панели Layers

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

Возвращение элементов внутрь фрейма

Отлично, разобрались с объектами и фреймом, вернемся к анимации. Чтобы посмотреть получившуюся анимацию нужно связать первый фрейм со вторым, настроить анимацию и перейти в режим просмотра прототипа в реальном времени (Present).

Режим Prototype

Справа на панели свойств выбираем вкладку Prototype (режим прототипирования), переходим на первый фрейм, в середине появится кружок с синей обводкой. Захватываем этот кружок мышкой и тянем появившуюся стрелку до второго фрейма, после того как стрелка прилипнет к нему, справа появится окно настройки интерактивного взаимодействия с интерфейсом и анимации (Interactive details & Animation).

Связываем два фрейма в режиме Prototype

Настраиваем анимацию

Выставляем следующие параметры:

Настройка анимации

В блоке Interaction Details (детали взаимодействия) выбираем After Delay (действие с задержкой) и напротив ставим тайминг 200ms, этого будет вполне достаточно чтобы не ждать появление элементов долго, но в тоже время чтобы они не появились мгновенно, нужно успеть все рассмотреть. В блоке Animation (анимация) из выпадающего списка выбираем пункт Smart Animate (умная анимация), ниже указываем свойство анимации Ease Out (плавное затухание), а тайминг ставим 800ms, это нужно для того чтобы анимация была плавной. Протестируем и посмотрим что получилось, для этого в верхнем правом углу есть кнопка Present (представлять).

Кнопка Present для перехода в режим просмотра прототипа

Тестируем анимацию

Нажимаем на кнопку Present и в режиме просмотра прототипа смотрим результат:

Получившаяся анимация в режиме просмотра прототипа

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

Настраиваем режим просмотра прототипа

Еще одна важная деталь: фон и корпус смартфона в режиме просмотра также можно поменять. Кнопка Show Prototype Settings (показать настройки прототипа) на вкладке Prototype:

Настройка фона и модели для режима просмотра прототипа

Вернемся к нашей композиции и продолжим настройку анимации первого экрана.

Настраиваем появление всех элементов первого экрана

Горы и нижние облака вместе с надписью опускаем чуть ниже, надпись не выносим за пределы фрейма, а в свойствах на вкладке Design устанавливаем прозрачность 0% также как фоновой картинке и верхнему небосводу, облако посередине сдвигаем влево.

Настройка прозрачности и перенос элементов

Тестируем анимацию первого экрана

Нажимаем на иконку Present для того чтобы протестировать анимацию.

Анимация появления первого экрана

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

Настройка прозрачности слоя с вагончиком

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

Создание интерактивной анимации

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

Настраиваем появление элементов третьего фрейма

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

Элементы третьего фрейма

Связываем второй и третий фрейм в режиме Prototype и настраиваем анимацию

Переходим на вкладку Prototype и стрелочкой связываем второй и третий фрейм. В появившемся справа окне указываем следующие параметры:

Настройки анимации

В первом блоке выбираем On Drag (перетаскивание), это нужно для интерактивного взаимодействия с прототипом, ну как будто мы пальцем сдвигаем страницу вверх, во втором блоке скорость анимации меняем на 1100ms, все остальное оставляем без изменений. Тестируем:

Тестирование интерактивной анимации в режиме просмотра прототипа

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

Настраиваем обратную связь для возврата на предыдущий фрейм

В режиме прототипа перемещаем стрелку обратно на второй фрейм, таким образом создаем возврат с третьего фрейма на второй при пролистывании.

Связываем третий фрейм со вторым в обратном порядке

Далее в настройках выбираем On Drag, а анимацию на возвращение делаем чуть быстрее — 1000ms, все остальное без изменения:

Тестирование интерактивной анимации скроллирования вверх и вниз

Отлично, для финального варианта не хватает контента на темном фоне. Добавьте его самостоятельно, можно добавить блок текста или карточки:

Финальное тестирование интерактивной анимации

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

Финальный результат

Финальный результат с появлением первого экрана и интерактивной анимацией

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

Профит!

Всем бобра!

P/S/ Запилю чуть позже гайд по созданию верхней иллюстрации (если будет лень то не запилю), которая готовилась специально для этого урока

Как создать эффекты параллакса с помощью Elementor — полное руководство

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

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

Да!

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

Содержание

  1. Параллакс в действии
  2. Можете ли вы Создать эффект параллакса с Elementor бесплатно?
  3. Как Создайте параллакс с помощью Elementor Pro
  4. Преимущества Parallax
  5. Заключение

Parallax в действии

Во-первых, зачем использовать эффект параллакса? Ну смотрите сами:

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

Вот еще один пример от компании, о которой вы, вероятно, слышали:

Обратите внимание, как гладко страница со всеми этими элементами, входящими и выходящими. Очевидно, Apple даже больше хитростей в рукаве, чтобы ослепить своих посетителей, но параллакс — огромная причина почему его страницы продуктов такие яркие!

Можешь ли ты Создать эффект параллакса с Elementor бесплатно?

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

Давайте пройдемся процесс вместе очень быстро.

Здравствуйте! Меня зовут Суджей, и я генеральный директор Astra.

Наша миссия — помочь малым предприятиям расти в Интернете с помощью доступных программных продуктов и образования, необходимого для достижения успеха.

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

Как Создайте параллакс с помощью Elementor Free

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

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

С новой пустой страницей готово, я возьму существующий шаблон в качестве отправной точки для нашего эффект параллакса. Вы можете следовать за мной, нажав Control-Shift-L (command-shift-L на Mac), чтобы открыть библиотеку шаблонов Elementor.

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

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

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

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

Код для Parallax

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

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

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

Инструкции довольно просты: Любой код CSS вводится в Dashboard > Appearance > Customize > Additional CSS , а затем вам нужно добавить класс parallax на вкладке Advanced для раздела, в котором вы хотите иметь эффект параллакса на своей веб-странице.

Для кода JavaScript вы можете получить фрагменты кода плагина и вставить его туда напрямую.

Плагины для Parallax

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

Самым популярным бесплатным за последние несколько лет был плагин Granular Controls для Elementor, который добавляет другие функции в дополнение к параметрам параллакса.

Как Создайте параллакс с помощью Elementor Pro

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

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

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

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

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

Вы можете легко увидеть эти слои с помощью Elementor’s Navigator, который находится в нижней части боковая панель.

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

Если хочешь знать подробнее о том, как настроить эффект параллакса, вот видео прямо с Элементор по теме:

Страница A С параллаксом в Elementor Pro

Готовы создать собственную страницу с параллаксом в Elementor Pro?

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

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

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

Вертикально

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

Горизонтальный

Так же, как мы сделали с вертикальная прокрутка, у нас есть возможность заставить изображение или раздел двигаться горизонтально по экрану. Ваши варианты здесь: влево или вправо, скорость и процентов видно снизу и сверху.

Прозрачность

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

Размытие

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

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

Преимущества Parallax

стоит ли идти на все эти неприятности?

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

1. Изготовить Хорошее впечатление.

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

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

2. Заработать Высшая вовлеченность.

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

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

3. Направьте пользователей на призыв к действию.

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

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

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

И если вы действительно хотите наделить Elementor некоторыми сверхспособностями, не забудьте проверить наши Ultimate Add-Ons для Elementor!

Заключение

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

Tweet

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

Использовали ли вы Elementor или другие инструменты для создания модного эффекта параллакса? Дайте нам знать ваши отзывы и любые рекомендации в комментариях ниже!

Параллаксное движение при прокрутке | Webflow University

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

В этом уроке:

  1. Создание начальной настройки
  2. Определение анимации
  3. Определение анимации прокрутки
  4. Предварительный просмотр анимации
  5. Добавление дополнительной анимации
  6. Отключение анимации для устройств
    34
    7. глубины
    Смоделируйте достоверное трехмерное пространство, следуя принципам восприятия глубины. К ним относятся размер и положение элементов и различные расстояния между тенями.
    Даже эффекты размытия можно использовать для имитации глубины резкости.

    Создайте начальную настройку

    Шаг 1. Добавьте раздел

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

    Шаг 2. Установите раздел

    Пока раздел выбран, на панели «Стиль» справа добавьте верхнее и нижнее отступы . Также установите overflow to hidden , чтобы сохранить содержимое в пределах границ раздела.

    Шаг 3. Добавьте контейнер

    Перетащите элемент Container с панели Elements и поместите его внутрь раздела. Установите для его высоту на 1200px и его позицию на относительно . Это позволит вам размещать изображения абсолютно внутри контейнера.

    Шаг 4. Добавление изображений

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

    Полезно знать
    Вы можете установить ширину изображения в
    модальном окне настроек изображения . Чтобы открыть его, дважды щелкните изображение или щелкните значок шестеренки рядом с меткой изображения. Настройки изображения также находятся на панели Element Settings справа от конструктора. Вы можете получить к ним доступ, выбрав изображение и нажав D на клавиатуре.
    Установка размера изображения в настройках изображения применит значения к этому изображению на всех контрольных точках устройства. Чтобы установить разные размеры для изображения на разных устройствах, установите ширину
    через панель стилей .

    Шаг 5. Стилизуйте изображения

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

    Шаг 6. Расположите изображения

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

    Определение анимации

    Понимание анимации поможет вам определить триггер и действие , которые необходимо определить для достижения поставленной цели.  

    В этой анимации вы хотите анимировать изображения, когда часть (элемент) прокручивается в окне просмотра. Итак, 9Триггер 0057 является триггером элемента из при прокрутке в представлении . И действие будет анимацией прокрутки .

    Шаг 7. Установите триггер

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

    Шаг 8. Настройте триггер

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

    Определение анимации прокрутки

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

    Шаг 9. Создание анимации прокрутки

    Перед созданием анимации поговорим о сглаживании. Сглаживание или демпфирование смягчает и сглаживает приближающуюся скорость к правильному положению на временной шкале анимации. Вы можете настроить значение сглаживания в разделе анимации прокрутки 9.0058 . Для этого урока вы можете оставить его на уровне 50%.

    Теперь создайте новое действие прокрутки  и переименуйте его в «Эффект прокрутки параллакса».

    Шаг 10. Выполните действие перемещения

    Выберите изображение с самым высоким z-индексом, которое кажется ближайшим к вашей точке обзора. Добавьте действие прокрутки из перемещение , чтобы изменить способ перемещения изображения во время анимации.

    Два ключевых кадра или экземпляра изображения добавляются на временную шкалу анимации. Один установлен на 0% — начало анимации; и один на 100% — конец анимации.

    Шаг 11. Установите начальную позицию

    Выберите первый ключевой кадр на 0%. В настройках преобразования перемещения переместите изображение вниз, установив его положение по оси Y на 1000 пикселей. Это будет позиция изображения при первой прокрутке раздела.

    Шаг 12. Установите конечное положение

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

    Шаг 13. Задайте второе действие

    Выберите изображение с наименьшим z-индексом и расположенное в конце раздела. Добавьте действие прокрутки move . На временную шкалу анимации для этого нового изображения добавляются два новых ключевых кадра: один с масштабом 0 %, а другой с масштабом 100 %.

    Определите начальную позицию

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

    Установите конечное положение

    Выберите ключевой кадр на 100% для того же изображения и установите положение по оси Y на 352px. Это изображение будет перемещаться в эту позицию по мере прокрутки страницы вниз. Если вы изменили настройку замедления для предыдущих действий, убедитесь, что вы установили одинаковые замедления для всех действий.

    Шаг 14. Создайте третью анимацию

    Выберите другое изображение на переднем плане. Добавьте действие прокрутки move . Для первого ключевого кадра переместите его вниз. Установите значение 300px. Для второго ключевого кадра переместите изображение вверх. Теперь установите значение вроде -500px. Это заставит изображение перемещаться на расстояние 800 пикселей, что медленнее, чем ближайшее изображение, и быстрее, чем самое дальнее.

    Предварительный просмотр анимации

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

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

    Добавить больше анимаций

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

    Отключить анимацию для устройств

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

    Полезно знать — скорость движения

    Когда вы устанавливаете положение изображений по оси Y, вы также устанавливаете скорость движения. Это связано с тем, что при прокрутке раздела первое изображение перемещается из положения по оси Y, равного 1000 пикселей, в положение по оси Y, равное -1000 пикселей, то есть на расстояние 2000 пикселей. Второе изображение перемещается на более короткое расстояние 704 пикселя, когда оно перемещается из положения по оси Y в -352 пикселя в положение по оси Y в 352 пикселя. Таким образом, оказывается, что в этом разделе есть три плана или уровня глубины: 9.0003

    • первый уровень — на котором изображение кажется ближе, а также движется быстрее
    • второй уровень — на котором почти все остальные изображения кажутся движущимися с нормальной скоростью
    • третий уровень — на котором изображение кажется дальше назад и двигаться гораздо медленнее
    Был ли этот урок полезен? Дайте нам знать!

    Спасибо за отзыв! Это поможет нам улучшить наш контент.

    No related posts.

Автор записи

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

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