Содержание
Как сделать эффект параллакса в Figma / Skillbox Media
Дизайн
#Руководства
0
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
Vkontakte
Telegram
Скопировать ссылку
Иллюстрация: Оля Ежак для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Figma — один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам — интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать эффект параллакса — когда разные элементы страницы прокручиваются с разной скоростью и зрительно находятся на разных плоскостях.
В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать параллакс. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:
- Кнопки, прокрутка и поп-апы
- Анимация
Для этой инструкции вам понадобится файл с готовым лендингом — в нём должно быть как минимум два экрана. Для простоты советуем скопировать наш.
Если вы будете делать свой лендинг, то при вёрстке важно учесть несколько моментов:
- Для анимации картинки её нужно добавить в отдельный фрейм.
- У второго экрана должен быть непрозрачный фон, чтобы анимация сработала правильно.
Все дальнейшие действия мы будем делать в нашем файле.
Стандартными средствами Figma нельзя настроить анимацию так, чтобы она активировалась во время скролла. Поэтому мы будем активировать параллакс с помощью клика. Если вы хотите показать анимацию разработчикам или клиенту, обязательно уточните, каким именно образом она должна активироваться, иначе вас могут понять не так.
- Сделайте копию основного фрейма.
- Выделите фоновое изображение и сместите его немного вверх.
- Выделите заголовок Explore Norway и указатель See more — их тоже нужно сместить немного вверх, но немного меньше, чем картинку. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.
- Выделите логотип и иконку с «бургер-меню» на макете. Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.
- Выделите свою копию лендинга и на правой панели настроек откройте Prototype. Затем наведите курсор на макет, зажмите появившийся кружок и перетащите его на оригинальный лендинг. Должна появиться стрелка.
- В появившемся окне в блоке Interactions details вместо On click укажите After delay и установите задержку 100 ms. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.
youtube.com/embed/HsXXQdpLTJU?loop=1&autoplay=1&controls=0&mute=1&playlist=HsXXQdpLTJU" frameborder="0" allowfullscreen=""/>
- Сделайте ещё одну копию основного фрейма.
- В новой копии выделите фоновое изображение и сместите его немного вверх. То же самое сделайте с заголовком Explore Norway и указателем See more — но их нужно сместить чуть меньше, чем картинку.
- Выделите заголовок, указатель, логотип и иконку с «бургер-меню». Затем в боковой панели в блоке Layer укажите у этих слоёв непрозрачность заливки 0%.
- Выделите фрейм со вторым экраном и переместите его наверх, чтобы он полностью закрыл собой стартовый экран. В нашем файле этот фрейм можно найти на панели слоёв — он называется contents.
- В основном фрейме с лендингом выделите фрейм с указателем и на правой панели настроек откройте Prototype.
Затем наведите курсор на указатель, зажмите появившийся кружок и перетащите его на вторую копию, где вы только что меняли экран. Должна появиться стрелка.
- В появившемся окне в блоке Interactions details укажите On click. В блоке Animation вместо Instant укажите Smart animation и поменяйте продолжительность на 800 ms.
- Сделайте то же самое в обратную сторону — в копии фрейма со вторым экраном выделите любой текстовый объект и добавьте от него такую же анимацию к оригинальному фрейму. Это поможет вам показать, как должен работать параллакс, если читатель скроллит страницу вверх.
Результат:
Самоучитель по Figma
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Больше коротких инструкций по Figma
Vkontakte
Telegram
Скопировать ссылку
Научитесь: Figma с нуля до PRO
Узнать больше
Шигеру Бан сделал выставку светильников Фрэнка Ллойда Райта в туннеле из бумажных труб
21 апр 2023
Для кинофестиваля «Сандэнс» сделали первый долгосрочный брендинг
21 апр 2023
Фестиваль нового дизайна «Среда» рассказал о своём брендинге этого года
20 апр 2023
Понравилась статья?
Да
10 примеров параллакс эффекта на сайте — Блог Active vision
Параллакс эффект на вашем сайте — это прекрасный способ удивить посетителей и улучшить поведенческий фактор.
Такой сайт выглядит привлекательно и ваш посетитель как минимум потратит время на то, чтобы рассмотреть его.
Топ 10 сайтов с параллаксом
Параллакс эффект наиболее часто использовался в играх. И в последнее время приобрел второе дыхание на веб ресурсах,
которые хотели добавить себе индивидуальности. Создать такой эффект не очень сложно, у нас есть подробная инструкция
как сделать параллакс на js.
Мы подобрали для вас 10 самых впечатляющих сайтов с примерами параллакса, чтобы вы могли вдохновиться на свой собственный дизайн.
Но прежде, чем перейти к ним, давайте разберем что же это за эффект и почему он так привлекает внимание пользователей.
Что такое параллакс скроллинг?
Давайте отделим два слова друг от друга и разберем каждый по отдельности.
Параллакс — это зрительная разница в расстоянии между объектами на переднем и заднем плане.
Скроллинг — это прокрутка экрана, то есть перемещение графики и текста в двухмерном пространстве.
Ну а параллакс скроллинг — это техника в веб дизайне, когда элементы фона на переднем
и заднем плане двигаются с разной скоростью при прокрутке окна браузера. Это создает эффект трехмерного пространства.
Как создать параллакс скроллинг на своем сайте?
10 примеров, которые взорвут ваших посетителей!
Если правильно и гармонично использовать эффект параллакса, то можно создать уникальный пользовательский опыт.
Но если сделать плохо, то это отпугнет ваших посетителей или будет отвлекать от основной цели сайта. Будьте особенно
осторожны с мобильной версией, там перебор с параллаксом может настолько замедлить работу браузера,
что посетитель вашего сайта может сильно расстроиться. Рекомендуем тестировать поведение пользователей, чтобы
добиться хороших результатов.
Примеры:
Два крутых американских дизайнера создали сайт, где рассказывают историю своих отношений и
используют при этом параллакс скроллинг. В результате получился романтический рассказ, дополненный классной графикой.
10 потрясающих примеров параллакс скроллинга
Твитнуть
Пример №1
На этом сайте вы можете посмотреть всю историю интернета. Это довольно увлекательно, а параллакс эффект добавляет динамики истории.
Пример №2
Этот ресторан расскажет вам о своем заведении, меню и поворах с помощью приятных иллюстраций дополненных параллакс эффектом.
Только, пожалуйста, не открывайте этот сайт, если вы голодный.
Пример №3
Хоть тема финансов считается довольно сухой и скучной, этот сайт умудрился сделать из этого увлекательную историю, по просмотру которой вы побежите открывать себе счет.
Пример №4
Очень аккуратное и не навязчивое применение параллакс эффекта вы можете увидеть на сайте, посвященном волкодаву по имени Ворон. На этом сайте
есть как текстовые параллакс эффекты, так и анимации Ворона, подкрадывающегося к своей жертве.
Пример №5
Epicurrence — это конференция для творческих людей, которая проводится в Америке, штате Колорадо.
Срезу на главном экране нас встречает параллакс эффект с использованием надписи и гор. В меру и со вкусом.
Пример №6
Сюрреалистичные иллюстрации в сочетании с параллаксом дают незабываемый пользовательский опыт, проверьте сами!
Пример №7
Пожалуй, самый яркий промо сайт в этой подборке! На нем вы во всей красе увидите замороженные итальянские морепродукты.
Пример №8
На сайте эпл реализована горизонтальная прокрутка. За счет параллакс эффекта можно покрутить и повертеть Ipad как только вы захотите.
Как всегда минималистичное и стильное решение.
Пример №9
Возможно вы уже встречали ранее этот сайт как пример параллакса. Но нужно признать, сделан он фантастически. Яркая иллюстрация заката
и множество слоев параллакса покоряют с первого раза.
Пример №10
Чтобы повторить это у себя на сайте, можете посмотреть наш туториал по параллаксу на js библиотеке SimpleParallax. Вы нашли больше интересных примеров? Оставляйте их в комментариях, лучшие мы добавим в наш топ.
26 CSS Parallax Effects
Коллекция отобранных бесплатных примеров кода HTML и CSS parallax из Codepen, GitHub и других ресурсов. Обновление коллекции февраля 2021 года. 11 новых предметов.
- Плагины параллакса jQuery и примеры
О коде
Parallax Photo Columns с анимацией, связанной прокруткой CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: scroll-timeline. js
О коде
Параллакс стены Диснея. Только CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Простой эффект параллакса с
вложением фона: исправлено
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
CSS Sticky Parallax Sections
Использует положение : липкое
и преобразования масштаба для создания эффекта липкого параллакса с помощью CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Герой параллакса CSS
Эффект параллакса, созданный с помощью преобразований CSS и свойств перспективы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Галерея горизонтального параллакса только для CSS
Несколько красивых фото из Парижа в этой экспериментальной галерее. Использует преобразования вместе со свойством перспективы для параллакса.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Чистый многослойный параллакс CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Весь пользовательский интерфейс без JavaScript
Весь сайт на чистом CSS (без JavaScript): параллаксная прокрутка; простая анимация ссылок и кнопок с помощью css-свойства cube-bezier
; плавная прокрутка при нажатии на навигационную анимацию гамбургера нажмите открыть/закрыть меню клика. и т. д.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Параллакс движения мыши
Простой параллакс в HTML и CSS с небольшим количеством ванильного JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Эффект параллакса
Оптимизировано для Google Chrome, некоторые проблемы возникают в Mozilla с background-clip: text;
Совместимые браузеры: Chrome, Edge, Firefox (частично), Opera, Safari
Ответ: нет
Зависимости: —
О коде
Тени параллакса
Тени параллакса для мобильных устройств.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект глубины параллакса 3D CSS
Игра с преобразованием CSS translate and rotate на основе mousemove
(извините, пользователи мобильных устройств) для имитации некоторой глубины по оси Z на карте и отдельных персонажей фильма.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Вырез изображения, эффект параллакса: CSS + SVG
Это работает на настольных компьютерах/ноутбуках, но не на мобильных устройствах. Сделайте вырез SVG того же цвета фона, что и ваш фон. Создайте фон параллакса с помощью CSS. Используйте те же пропорции, что и ваш SVG. Поместите
img
вашего SVG внутри HTML для вашего параллакса div
. Выровняйте и измените размер фона параллакса по своему усмотрению. Не забудьте сделать вещи отзывчивыми!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Только CSS Параллакс
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Эффект параллакса только для CSS
Javascript не требуется. Просто обычный CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Галерея изображений параллакса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: rellax. js
О коде
Верх страницы Параллакс
Параллакс верхней части страницы (переменные SVG + CSS).
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Ответ: да
Зависимости: —
С код
Свиток параллакса
Простая параллаксная прокрутка с фиксированным фоном.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Сетка параллакса
Я использовал parallax.js для настройки этой интерактивной панорамной сетки изображений. Использует позицию курсора, если вы находитесь на настольном компьютере или ноутбуке.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js, parallax.js
О коде
Фон параллакса
Чистый параллакс фона CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Карта
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Сферы параллакса CSS
Вдохновленный Sims 4.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Адаптивный разворот журнала
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
С код
Параллакс Пейзаж Только CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Чистый эффект параллакса CSS (глубина резкости)
Используйте чистый CSS для создания эффекта параллакса с глубиной резкости. И немного всплывающий фото браузер.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Параллакс Мир UGG
Эксперимент с параллаксом на целевой странице World of UGG.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
Движение параллакса при прокрутке | Webflow University
youtube.com/embed/0ITA_pwfzDE» frameborder=»0″ scrolling=»no»>
В этом видео используется старый интерфейс. Скоро будет обновленная версия!
Эффект параллакса создает иллюзию глубины и перспективы. Вы можете добиться этого, перемещая визуальные элементы с разной скоростью. Создание анимации с использованием эффекта параллакса может служить многим целям и позволяет вашим посетителям взаимодействовать с контентом вашего сайта различными способами, например, показывая, как что-то работает, или выделяя анатомию продукта. Или он может создать визуальный эффект, который удерживает посетителей вашего сайта дольше. Новая версия Webflow Interactions 2.0 делает интеграцию таких анимаций на ваш веб-сайт очень простой и без необходимости писать ни единой строки кода.
В этом уроке:
- Создание начальной настройки
- Определение анимации
- Определение анимации прокрутки
- Предварительный просмотр анимации
- Добавление дополнительных анимаций
- Отключение анимации для устройств
8 соединение глубины
Смоделируйте достоверное трехмерное пространство, следуя принципам восприятия глубины.
К ним относятся размер и положение элементов и различные расстояния между тенями. Даже эффекты размытия можно использовать для имитации глубины резкости.
Создайте начальную настройку
Шаг 1. Добавьте раздел
Во-первых, давайте создадим раздел, который можно прокручивать в поле зрения и за его пределами. Перетащите элемент Section на холст с панели Elements , расположенной слева. Поместите его ниже сгиба, а также над другими секциями.
Шаг 2. Установите раздел
Пока раздел выбран, на панели «Стиль» справа добавьте верхнее и нижнее отступы . Также установите overflow to hidden , чтобы сохранить содержимое в пределах границ раздела.
Шаг 3. Добавьте контейнер
Перетащите элемент Container с панели Elements и поместите его внутрь раздела. Установите его height на 1200px и его положение на относительно .
Это позволит вам размещать изображения абсолютно внутри контейнера.
Шаг 4. Добавление изображений
Перетащите изображение из Панель активов в раздел. Установите подходящую ширину и повторите процедуру для всех изображений. Поскольку вы хотите создать иллюзию трехмерного пространства, убедитесь, что вы приняли это во внимание при настройке размеров изображения.
Полезно знать
Вы можете установить ширину изображения в
модальном окне настроек изображения . Чтобы открыть его, дважды щелкните изображение или щелкните значок шестеренки рядом с меткой изображения. Настройки изображения также находятся на панели Element Settings справа от конструктора. Вы можете получить к ним доступ, выбрав изображение и нажав D на клавиатуре.
Установка размера изображения в настройках изображения применит значения к этому изображению на всех контрольных точках устройства. Чтобы установить разные размеры для изображения на разных устройствах, установите ширину
через панель стилей .
Шаг 5. Стилизуйте изображения
Добавьте тень к каждому изображению. Убедитесь, что все изображения имеют одинаковую тень угол . Измените цвет и непрозрачность тени. Установите его расстояние от границ изображения. Добавьте немного размытия и установите размер или распространение тени относительно границ изображения.
Шаг 6. Расположите изображения
Следующая задача — установить позицию каждого изображения на абсолютную . Затем расположите каждое изображение, изменив любое из значений положения с помощью пользовательского интерфейса или вручную введя их для каждого ввода. Укажите z-index для изображений. Установите более высокий z-индекс для тех изображений, которые вы хотите расположить ближе, а также перекрыть любые изображения, появляющиеся на заднем плане.
Определение анимации
Понимание анимации поможет вам определить триггер и действие , которые необходимо определить для достижения поставленной цели.
В этой анимации вы хотите анимировать изображения, когда часть (элемент) прокручивается в окне просмотра. Итак, 9Триггер 0003 является триггером элемента из при прокрутке в представлении . А действие будет анимацией прокрутки .
Шаг 7. Установите триггер
Теперь, когда вы определили элементы своего взаимодействия, вы можете приступить к его созданию. Выберите раздел, содержащий созданные вами изображения. Откройте панель Interactions и создайте триггер элемента из при прокрутке в представлении .
Шаг 8. Настройте триггер
Выберите для воспроизведения анимации прокрутки. Измените границы анимации, если хотите. Это позволяет вам установить, когда анимация начинается и заканчивается. По умолчанию анимация начинается, когда секция начинает входить в область просмотра, и заканчивается, когда она покидает область просмотра.
Оставьте значение по умолчанию для этого руководства.
Определение анимации прокрутки
Определение цели может помочь определить действия, которые необходимо выполнить. Цель на данном этапе состоит в том, чтобы перемещать изображения с различной скоростью. Те, кто впереди, должны двигаться быстрее, чем те, кто сзади, когда вы прокручиваете раздел. Итак, вы будете создавать действие прокрутки из перемещение для каждого изображения. Затем установите позицию каждого изображения на оси Y в начале и в конце анимации.
Шаг 9. Создание анимации прокрутки
Перед созданием анимации поговорим о сглаживании. Сглаживание или демпфирование смягчает и сглаживает приближающуюся скорость к правильному положению на временной шкале анимации. Вы можете настроить значение сглаживания для анимаций прокрутки . Для этого урока вы можете оставить его на уровне 50%.
Теперь создайте новое действие прокрутки и переименуйте его в «Эффект прокрутки параллакса».
Шаг 10. Выполните действие перемещения
Выберите изображение с самым высоким z-индексом, которое кажется ближайшим к вашей точке обзора. Добавьте действие прокрутки из перемещение , чтобы изменить движение изображения во время анимации.
Два ключевых кадра или экземпляра изображения добавляются на временную шкалу анимации. Один установлен на 0% — начало анимации; и один на 100% — конец анимации.
Шаг 11. Установите начальную позицию
Выберите первый ключевой кадр на 0%. В настройках преобразования перемещения переместите изображение вниз, установив его положение по оси Y на 1000 пикселей. Это будет позиция изображения при первой прокрутке раздела.
Шаг 12. Установите конечное положение
Выберите второй ключевой кадр на временной шкале анимации и переместите изображение вверх, установив его положение по оси Y на -1000 пикселей. Это будет позиция изображения, когда раздел прокручивается из поля зрения.
Шаг 13. Задайте второе действие
Выберите изображение с наименьшим z-индексом, расположенное в конце раздела. Добавьте действие прокрутки move . На временную шкалу анимации для этого нового изображения добавляются два новых ключевых кадра: один с масштабом 0 %, а другой с масштабом 100 %.
Определите начальную позицию
Выберите ключевой кадр на уровне 0% для этого нового изображения. В настройках преобразования перемещения переместите изображение вверх, установив его положение на Ось Y от до -352 пикселей. Это изображение начнет перемещаться из этой позиции по мере прокрутки раздела.
Установите конечное положение
Выберите ключевой кадр на 100% для того же изображения и установите положение по оси Y на 352 пикселя. Это изображение будет перемещаться в эту позицию по мере прокрутки страницы вниз. Если вы изменили настройку замедления для предыдущих действий, убедитесь, что вы установили одинаковые замедления для всех действий.
Шаг 14. Создайте третью анимацию
Выберите другое изображение на переднем плане. Добавьте действие прокрутки move . Для первого ключевого кадра переместите его вниз. Установите значение 300px. Для второго ключевого кадра переместите изображение вверх. Теперь установите значение вроде -500px. Это заставит изображение перемещаться на расстояние 800 пикселей, что медленнее, чем ближайшее изображение, и быстрее, чем самое дальнее.
Предварительный просмотр анимации
Предварительный просмотр анимации в режиме предварительного просмотра Designer или в реальном времени на холсте путем переключения просмотр в реальном времени вкл. Теперь эффект параллакса более выражен, и вы создали то, что выглядит как еще один уровень глубины в этой анимации. Внесите коррективы в позиции или смягчение для достижения желаемого результата.
Включите просмотр в реальном времени, чтобы увидеть эффект при прокрутке холста.
Кажется, что изображение движется с большей скоростью, что дает нам эффект параллакса, потому что изображение также кажется ближе к нам.
Добавить больше анимаций
Продолжайте добавлять действия прокрутки к каждому из изображений, которые вы хотите анимировать во время этой последовательности анимации прокрутки. Убедитесь, что вы следуете этому логическому шаблону, чтобы создать хорошую анимацию прокрутки параллакса: элементы спереди (с более высоким z-индексом) кажутся движущимися с большей скоростью, чем сзади (с более низким z-индексом).
Отключить анимацию для устройств
Вы можете отключить эту анимацию на мобильных устройствах. Закройте временную шкалу анимации, нажав на X рядом с «Эффект прокрутки параллакса». Затем в разделе другие настройки , отключите устройства , для которых вы не хотите запускать это взаимодействие.
Полезно знать — Скорость движения
Когда вы устанавливаете положение изображений по оси Y, вы также устанавливаете скорость движения.