Как сделать параллакс эффект в construct 3
Добавил пользователь Cypher Обновлено: 05.10.2024
Параллакс эффект — довольно интересное дополнение к стилистике веб-страниц, которое позволяет оживить дизайн сайта. С реализацией новых возможностей CSS3 в браузерах достичь этого эффекта стало достаточно просто. В этой статье мы рассмотрим несколько примеров, как сделать параллакс эффект, используя возможности CSS и JavaScript.
Способы сделать параллакс эффект
Если для создания параллакса используются фоновые изображения в блоках с разной вложенностью, то в этом случае удобно использовать свойство background-position для смещения фоновых изображений, но если в эффекте параллакса замешаны абсолютно-позиционируемые слои, то в этом случае придется оперировать свойствами их положения left, top и т.д. Но гораздо удобнее использовать возможности CSS3 и свойство transform, которое позволяет избежать некоторые ненужные расчеты, особенно при масштабировании страницы сайта. К тому же, transform позволяет сделать множество других крутых эффектов совместно с параллаксом, но это уже тема для отдельной статьи. Ну, а пока рассмотрим два примера создания эффекта: с фоновыми изображениями и с блоками.
Анимацию параллакса возможно приспособить под разные события на веб-странице сайта. Например, при прокрутке страницы, по нажатию кнопок клавиатуры, это может быть и просто зацикленная анимация, но вот еще один интересный способ эффекта параллакса — по движению мыши. По большей части способы реализации разных видов параллакс эффектов схожи, поэтому здесь мы не будем рассматривать много способ, а разберем детально зацикленную анимацию, а также параллакс по движению мыши, чего будет вполне достаточно для понимания.
Параллакс фона
Несмотря на то, что для создания параллакса фона мы будем пользоваться фоновыми изображениями, все же нам потребуется создать несколько контейнеров друг внутри друга с одинаковыми размерами, либо позиционированными так, чтобы они полностью перекрывали друг друга, но каждый со своим фоновым изображением.
Давайте рассмотрим всё на конкретном примере горного пейзажа со скачущим всадником.
Параллакс фона. Клик по сцене вызывает эффект фокусировки с размытием.
И так, для этой сцены было создано пять блоков объединенные одним общим контейнером. Каждый из этих блоков содержит класс с CSS свойством, указывающим на свое фоновое изображение. Кроме этого, для каждого блока установлено своё позиционирование фонового изображения.
Картинки фоновых изображений PNG с прозрачными областями, используемых для создания параллакса фонов.
Атрибут data-landscape является триггером, с помощью которого скрипт определяет, что вот именно для этих блоков нужно менять позиционирование фона, то есть свойство background-position . В последнем блоке с атрибутом data-rider никаких изменений не производится, а там просто присутствует анимированное GIF-изображение с всадником.
В CSS для основного контейнера должно быть указано позиционирование отличное от static, чтобы можно было одинаково расположить и растянуть внутри него внутренние блоки с изображениями фонов. Для вложенных блоков в основной контейнер (.contain > div) потребуется указать абсолютное позиционирование, чтобы блоки смогли наложиться друг поверх друга. Помимо этого, для этих же блоков нужно указать линейный переход для свойств, которые мы будем изменять с помощью JavaScript достигая эффекта параллакса.
transition: background-position linear;
Также для внутренних блоков потребуется поставить и свойство transition-duration: inherit , то есть наследуемый, поскольку это свойство будет более грамотно устанавливать посредством скрипта родителю, ведь длительность CSS-перехода должна быть равна задержке следующей итерации изменения координат, что из скрипта контролировать проще.
Затем, каждому отдельному блоку необходимо указать фоновое изображение и координаты абсцисс начального положения фона и постоянного положения ординат, поскольку анимация исключительно горизонтальная и менять мы будем только координаты оси Х.
Перед объявлением и запуском рекурсивной функции нужно установить длительность выполнения CSS-перехода для контейнера, которое унаследуют дочерние блоки.
Завершается этот скрипт отсрочкой рекурсивного вызова следующей итерации данной функции.
Ну и конечно же, запустить выполнение нужно отдельным вызовом функции.
Параллакс по движению мыши
Давайте теперь рассмотрим, как сделать эффект параллакса, зависящий от движения мыши. Здесь же я разберу другой способ реализации параллакса основанный на свойстве CSS3 transform с функцией translate() . Именно это свойство будет меняться в зависимости от координат положения курсора мыши в окне браузера , заключенных в свойствах события мыши — clientX и clientY.
Параллакс по движению мыши. Клик по сцене вызывает эффект фокусировки.
Также атрибут data-size используется как селектор, чтобы указать соответствующие размеры блоков для имитации пространственной перспективы.
Далее для каждого блока требуется указать уникальное положение на экране, поэтому для каждого из них прописан стилевой класс с координатами позиционирования.
Как вы можете видеть, JavaScript сценарий параллакса по движению мыши достаточно простой. Прежде всего следует получить объекты, с которыми мы будем работать: контейнер и блоки с облаками.
Внутри него записан сценарий, который будет срабатывать при каждом смещение курсора, а именно, пересчитывать положение облаков в процентные значения (процентами проще оперировать, так как они не зависят от размеров окна), которые находятся в прямой зависимости от значений полодения курсора event.clientX и event.clientY .
. а далее, с помощью прохода по коллекции облаков, назначать им новые значения положения в CSS функции translate() , соответственно слову указанному в атрибуте data-size . Для каждого вида блоков-облаков добавляется свой делитель, для того, чтобы притормозить или ускорить движение.
Вот и весь сценарий JavaScript. И хотя вы можете наблюдать дополнительный эффект фокусировки по событию клика мыши, в описании скрипта его нет, поскольку в цели данного урока это не входило. Он добавлен просто для украшения, ведь он так хорошо вписывается в конструкцию с эффектом параллакса. Но вы можете с ним ознакомиться, посмотрев в исходный код страницы или попробовать сделать сами.
Приветствую на страницах сайта WebDevTips. Сегодня покажу, как за 2-3 минуты сделать параллакс эффект для заднего фона вашего сайта. Писать будем на чистом CSS. Без использования JS, или каких либо библиотек. Наверняка вы часто встречали этот эффект. Это один из элементов wow-дизайна, который не только красиво выглядит, но и повышает конверсию.
Кстати, еще одним элементом wow-дизайна является видео фон для сайта. Если вы еще не знаете как поставить видео на фон вашего сайта — рекомендую ознакомится с моей статьей.
Видео:
Пример параллакс эффекта для фоне:
Вот и сам код:
В принципе, на этом код параллакса заканчивается. Далее необходимо добавить только контент вверху и внизу от него, что бы увидеть сам эффект!
Вот все файлы с полным кодом из видео урока — скачать.
Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях, буду рад ответить)
Буду очень благодарен, если вы подпишитесь на мой Telegram-канал , или YouTube.
От автора: одним из самых заметных трендов современного веб-дизайна является применение эффектов параллакс-прокрутки (parallax scrolling). В этом учебнике я намереваюсь показать вам, как создать на вашем собственном сайте этот эффект, использовав немного воображения и помощь от Stellar.js.
Вступление
Эффект параллакс-прокрутки стал популярен, когда несколько лет назад такие сайты, как Nike’s Better World, представили его на своих страницах. Параллакс-эффект относительно интерфейсов существует примерно с 1980-х гг., когда его впервые применили в названиях видеоигр и впоследствии в самих играх. Позже он стал появляться в веб-интерфейсах – вы ознакомитесь с silverbackapp, который применил этот эффект в качестве части заголовка.
Будучи скомбинированными с функциональностью прокрутки вебсайта, эффекты параллакс-прокрутки оказывают сильное визуальное воздействие, особенно будучи скомбинированными с неким видом рассказа, ведущим вас в путешествие.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Пара…Что?
Параллакс – это сдвиг или различие в видимой позиции объекта, рассматриваемого с двух различных линий зрения. – Wikipedia
Так что HTML5 ли это? Конечно, HTML5 играет свою роль в эффекте параллакс-прокрутки, но это не просто HTML5, в ней также используется некая форма javascript, такая как jQuery, и она невозможна без небольшого количества CSS3.
Расслоение множественных фонов и объектов (таких как изображения), и затем их движение на разных скоростях создает ощущение глубины и объема.
Параллакс в действии
Рассмотрите несколько примеров демонстрации параллакс-эффектов (изображения кликабельны).
Каждый вебсайт рассказывает историю
Вышеприведенные примеры берут вас в некий вид путешествия или события, и делают это самыми различными способами. Так, по моему, и создается успех сайта с параллакс-прокруткой. Ключ к проектированию интересного и уникального творения – сосредоточение на хорошей истории и концепции, а затем – применение эффекта с помощью творческих и образных способов.
Wieden+Kennedy (W&K), ребята, стоящие за вебсайтом Nike Better World поддерживают эту мысль:
По нашему мнению, технологии независимы от концепции. Мы в основном фокусировались на создании отличного впечатления от интерактивного рассказа. – Wieden+Kennedy (W&K)
Как будет работать наш сайт
Для демонстрации одного из способов осуществления параллакс-прокрутки, я предпочел показать вам простой сайт из четырех слайдов, в котором эффект применяется на различных фонах и изображениях. Также в верхнем левом углу я добавил навигацию, которая может прокрутить на отдельный слайд сайта, и, кроме того, меняет свой размер при отражении номера активного слайда. Я также использую веб-шрифт Bebas, хотя вы может по желанию взять что-нибудь другое.
Вот такая у нас будет структура папок:
Примененные плагины
Чтобы добиться намеченного, я применяю Stellar.js, плагин jquery от Марка Дэлглиша (Mark Dalgleish), с помощью которого создавать сайты с параллакс-прокруткой легко и просто. В конце статьи я перечислил другие плагины, с помощью которых можно это сделать. Я предпочел использовать Stellar.js, потому что его довольно просто применять и, хотя это в учебнике не показано, можно оптимизировать для работы на платформах интеллектуальных устройств, таких как iOS.
Я также собираюсь применить jQuery waypoints Калеба Тротона (Caleb Troughton). Waypoints – это другой плагин jQuery, исполняющий функцию при прокрутке элемента. Он дает возможность навигации сайта определить в соответствии с положением полосы прокрутки, на каком слайде мы находимся.
jQuery easing – это плагин от GSGD, предлагающий передовые опции ослабления. Мы применим его, чтобы при переходах от слайда к слайду получить красивое, легкое перемещения.
Разметка HTML
Начав с index.html, добавляем HTML5 doctype, затем создаем раздел head. Он состоит из CSS Reset, за чем следует таблица стилей styles.css. Затем добавляем библиотеку jQuery, после которой идет наш пользовательский файл jQuery js.js. За ним, в свою очередь, следуют три плагина — jquery.stellar.min.js,waypoints.min.js и jquery.easing.1.3.js.
link rel = "stylesheet" type = "text/css" href = "//yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" >
Следующий элемент нашего html – изображение логотипа Envato, находящийся в постоянном фиксированном положении на всем сайте. Добавляем для него класс envatologo, чтобы можно было позже при кодировании CSS установить его позиционирование.
Слайды
У четырех слайдов одна разметка:
Мы применяем класс slide, который будет использоваться как общий стиль всех слайдов. Затем каждому слайду назначается id slide, за которым следует номер слайда, например, Slide1. Применяем атрибут данных HTML5 и называем его data-slide. Это позволит нам выделить его с помощью jQuery как целевой объект. Добавлен другой атрибут данных data-stellar-background-ratio. Он – специально для плагина jQuery stellar.js и говорит тому, в каком соотношении должна прокручиваться скорость элемента.
Соотношение корреспондирует обычной скорости прокрутки, поэтому соотношение в 0.5 заставит элемент прокручиваться на половинной скорости, при соотношении в 1 никакого эффекта не произойдет, а при соотношении в 2 элемент станет прокручиваться с удвоенной скоростью.
У всех слайдов, кроме четвертого, есть кнопка, которая позволит нам прокручивать к следующему слайду. Мы добавляем ей атрибут data-slide со значением номера следующего слайда. Так кнопке становится известно, какой слайд следующий, поэтому можно передать данное значение в jQuery. У большинства слайдов, кроме того, имеется интервал с классом slideno; просто большая текстовая версия номера слайда, который появляется в нижнем левом углу большей части слайдов. Его также можно использовать для названий.
Для третьего и четвертого слайдов мы еще добавляем несколько элементов-изображений в div slide. Эти изображения обеспечат настоящее понимание создаваемого нами эффекта параллакса. Мы оборачиваем их в div wrapper шириной 960px, который будет центрирован, чтобы гарантировать хорошее отображение в мониторах десктопов всех размеров.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
К каждому изображению прикреплен атрибут data-stellar-ratio. Он, опять же, является специфичным для stellar.js и говорит плагину, в каком скоростном соотношении мы должны прокручивать элемент.
img src = "images/slide3/freelance.jpg" data - stellar - ratio = "1.4" data - stellar - vertical - offset = "-102" alt = "" >
img src = "images/slide3/psdtuts.jpg" data - stellar - ratio = "1.5" data - stellar - vertical - offset = "-53" alt = "" >
img src = "images/slide3/rockable.jpg" data - stellar - ratio = "2.7" data - stellar - vertical - offset = "-200" alt = "" >
img src = "images/slide3/themeforest.jpg" data - stellar - ratio = "3" data - stellar - vertical - offset = "-200" alt = "" >
img src = "images/slide3/tutshub.jpg" data - stellar - ratio = "1" data - stellar - vertical - offset = "-200" alt = "" >
img src = "images/slide3/psdtuts.jpg" data - stellar - ratio = "1.5" data - stellar - vertical - offset = "-200" alt = "" >
К счастью для нас, здесь задействовано совсем немного CSS. Это – базовые стили нескольких простых элементов, а по большей части – позиционирование некоторых элементов-изображений.
Первое, что нужно сделать в CSS – это ввести шрифт BEBAS с помощью @font-face. Затем добавляем его в html для определения шрифта сайта. Также устанавливаем ширину и высоту html и body на 100%. Так наши слайды смогут адаптироваться к полной ширине и высоте экрана пользователя.
Навигация
Позиция основной навигации установлена на fixed, чтобы на протяжении всего сайта удерживать ее в одном месте. Мы делаем сверху офсет в 20px, чтобы над ней было немного свободного пространства и устанавливаем z-index на 1, чтобы обеспечить ее пребывание в верхнем слое сайта.
В действительности весь список – это просто стили текста с границей, проходящей внизу в качестве подчеркивания. Ее ширина 53px. Также добавлен переход, анимирующий стандартное состояние навигации в состояние наведения мыши. Я воспользовался здесь префиксом -webkit- просто для сокращения кода, а полный исходный код, который можно скачать выше, содержит все префиксы.
Состояние наведения мыши применяет те же свойства, что и класс active; по существу, только увеличение размера и ширины шрифта. Класс active применен jQuery для назначения стилей соответствующему слайду, видимому в окне браузера.
Логотипу envato назначены несколько позиционирующих стилей, просто для обеспечения его местоположения в центре экрана. Аналогично навигации, ему также назначен z-index в 1, чтобы он оставался сверху.
Теперь перейдем к стилям самих слайдов. Назначаем им свойство привязки к фону fixed. Свойство привязки к фону background-attachment определяет, зафиксировано ли фоновое изображение или прокручивается вместе с остальной страницей, так что оказывается пригодным для фоновых изображений (таких, как примененные на слайде четыре). Для этого примера мы использовали обои Филиппа Сайферта (Philipp Seiffert), которые можно скачать здесь. Устанавливаем позиционирование слайда на relative. Благодаря этому мы можем абсолютно расположить классы slideno и button перед слайдом в отличие от действующего документа.
Тень блока применена в чисто декоративных целях и добавляет к верхней внутренней стороне каждого слайда красивую отбрасываемую тень.
.button – для кнопки внизу страницы, которая позволяет нам перейти к следующему слайду. Мы поместили ее по центру внизу каждого слайда и использовали в качестве указателя изображение стрелки.
Этот псевдокласс подбирает элементы на основании их расположения внутри списка дочерних элементов родительского элемента.
Так что мы в общем назначаем стили каждому изображению в том порядке, в котором они появляются в нашей разметке. Мы просто размещаем их относительно обертки слайда.
Слайд три следует тому же порядку, что и слайд два.
Четвертый слайд слегка отличатся от предыдущих двух, так как не содержит элементов-изображений и цвета фона, а вместо того применяет фоновое изображение. Также мы назначили ему свойство CSS3 background-size:cover. Оно в основном устанавливает фоновое изображение, чтобы то покрывало все окно браузера и меняет размер по мере изменения окна браузера. Также мы добавили строку текста в последнем слайде, которому назначили стили и класс parallaxbg.
jQuery
На самом деле jQuery как раз оживляет весь дизайн. Я прокомментировал код, чтобы можно было видеть, что в точности происходит.
//Если пользователь прокручивает вверх, измените навигационную ссылку, у которой тот же атрибут data-slide, что у слайда, который нужно активировать, и
$ ( '.navigation li[data-slide crayon-h"> + dataslide + '"]' ) . addClass ( 'active' ) . prev ( ) . removeClass ( 'active' ) ;
// иначе Если пользователь прокручивает вниз, измените навигационную ссылку, имеющую тот же атрибут data-slide, что у слайда, который нужно активировать, и
$ ( '.navigation li[data-slide crayon-h"> + dataslide + '"]' ) . addClass ( 'active' ) . next ( ) . removeClass ( 'active' ) ;
//waypoints не обнаруживает первый слайд, когда пользователь прокручивает назад кверху, поэтому мы добавляем здесь немного кода, удаляющего класс
//Создайте функцию, которой будет передан номер слайда, и которая затем прокрутит к этому слайду с помощью animate от jquery. Плагин Jquery easing
// также применяется, поэтому мы передали метод ослабления 'easeInOutQuint', доступный в этом плагине.
//При щелчке пользователя по навигационным ссылкам получите значение ссылки атрибута data-slide и передайте эту переменную функции goToByScroll
// При щелчке пользователя по кнопке получите значение кнопки атрибута data-slide и передайте эту переменную функции goToByScroll
Еще несколько моментов
Если посмотреть на слайд два нашего примера, вы заметите пузыри в 3D. Я добавил к некоторым из них легкое Гауссово размытие, в основном к тем, которые на переднем плане, и к фоновым. Сочетание их с четко фокусированными пузырями добавляет ощущения глубины, создаваемого параллаксом. При попытке создания в своем сайте красивой глубины стоит обдумать этот момент.
Множество сайтов, применяющих этот эффект, имеют тенденцию быть довольно перегруженными изображениями, так что убедитесь, что как можно сильнее сжали свои рисунки (без потери качества). Если после сжатия они все равно долго грузятся, обдумайте возможность добавления на свой сайт загрузчика.
Заключение
Параллакс-прокрутка в настоящее время – один из излюбленных эффектов, и его границы постоянно расширяются. Здесь и сейчас я показал вам, как установить основной вебсайт, применяющий параллакс-прокрутку. Демоверсия, показанная сегодня – это сравнительно простой сайт в учебных целях. Тех из вас, кто вот-вот создаст сайт с использованием этого эффекта, умоляю потратить время на выработку концепции и истории, потому что именно это делает его уникальным, многопользовательским и действительно доставляющим удовольствие. Применяйте этот эффект мудро, а не просто ради того, чтобы применить.
Надеюсь, вам понравилось читать о параллакс-прокрутке, и я хотел бы увидеть, как вы, ребята, применили ее на своих сайтах, так что не постесняйтесь оставить на них ссылки ниже. Увидимся!
Автор: Aaron Lumsden
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Параллакс: лучшие решения и ошибки
Аудио перевод статьи
Параллакс — творческий инструмент, позволяющий дизайнерам создавать трехмерное пространство на двухмерном экране.
Указанный эффект добавляет интерфейсу глубины, благодаря чему пользователи получают захватывающий и уникальный опыт — именно этого стремится достичь каждый бренд!
Что такое параллакс?
Параллакс-скроллинг — техника в веб-дизайне, при которой пользователям кажется, что элементы на экране движутся с разной скоростью, создавая эффект 3D.
Ощущения подобны восприятию пространства за рулем автомобиля, когда близкие объекты быстро остаются позади, а те, которые располагаются на расстоянии, исчезают из поля зрения лишь через какое-то время.
Существует несколько видов параллакса — во всех случаях контент размещается на отдельных слоях для получения желаемого эффекта. Устанавливая для каждого слоя свою скорость прокрутки, дизайнеры создают иллюзию движения объектов по экрану при скролле.
Краткая история параллакса
Параллакс появился еще в 1930-х годах как метод создания анимации для мультфильмов, таких как, например, “Белоснежка и семь гномов” от Disney. В начале 1980-х дизайнеры видеоигр использовали его, чтобы добавлять 3D-эффекты в 2D-игры, в частности Jump Bug в 1981 году.
Лишь в 2007 году параллакс впервые был реализован в веб-дизайне с помощью Javascript и CSS2 в Internet Explorer 6. С появлением в 2011 году HTML5 и CSS3 стало проще добавить такие эффекты в интерфейс, поэтому их популярность резко выросла.
Сейчас же технологии позволяют создавать невероятно сложные параллаксы, поэтому дизайнеры способны подарить пользователям по-настоящему захватывающий визуальный опыт.
Когда использовать параллакс
Хотя параллакс и является чрезвычайно эффективным инструментом для создания уникального опыта взаимодействия, дизайнеры должны учитывать недостатки такой прокрутки.
1. Скорость загрузки страницы
Параллакс можно назвать “убийцей” скорости загрузки страницы, особенно, когда речь идет о сайтах, размещенных на виртуальном хостинге (когда несколько сайтов находятся на 1 сервере). Согласно данным Google, 2 секунды — максимально допустимое время загрузки сайта электронной коммерции. Для большинства других сайтов среднее значение составляет 3-6 секунд.
Каковы ваши цели, если вы создаете сайт электронной коммерции? Впечатлить пользователя своими навыками в области дизайна или продать продукт? Если вы не можете оптимизировать скорость загрузки, не стоит добавлять параллакс-эффект на сайт электронной коммерции или другой сайт, где скорость имеет важное значение.
2. Как параллакс отразится на контенте?
Еще один вопрос, на который следует ответить, прежде чем добавить параллакс: как он отразится на контенте?
Например, на сайте Collage Crafting дизайнеры решили использовать этот эффект для отображения списка точек продаж.
Часть текста трудно прочитать, так как при прокрутке он обрезается сверху и снизу. Такой опыт взаимодействия нельзя назвать удобным, поскольку пользователи не могут нормально воспринимать весь контент.
Если вы хотите, чтобы посетители сайта прочитали текст, не усложняйте интерфейс! Есть и другие способы представить контент, сохраняя его читабельность.
3. Убедитесь, что параллакс не отвлекает и не раздражает пользователей
Иногда параллакс смотрится уместно. Например, креативное агентство действительно может произвести на потенциальных клиентов впечатление, продемонстрировав таким образом свои навыки.
Однако если я ищу, например, расценки на автострахование, мне не захочется тратить время, прокручивая страницы с причудливыми эффектами, чтобы добраться до них.
В высококонкурентных отраслях, где потребители стремятся быстро получать информацию, параллакс может отрицательно сказаться на проценте отказов и конверсии.
Всегда думайте о контенте, контексте и о том, каким образом сайт удовлетворяет потребности пользователей.
9 вдохновляющих примеров параллакса
Мы нашли 9 отличных примеров реализации параллакса. Во всех случаях дизайнеры применили этот эффект, чтобы рассказать пользователям историю.
Как вы увидите из этих примеров, параллакс может быть эффективным инструментом сторителлинга, однако его реализацию необходимо тщательно продумать.
1. NIIKA
NIIKA — креативное агентство из Австралии. Изображение на главной странице содержит композицию из фигур, которые еле заметно двигаются. При прокрутке абстрактные формы перемещаются по экрану, а большие динамические заголовки сообщают об услугах агентства.
Ниже можно увидеть еще один эффект параллакса: на фоне зафиксирована карта, поверх которой располагаются контактные данные агентства, перемещающиеся при прокрутке.
Призыв к действию “Поработайте с нами” перед футером также реализован с помощью параллакса.
Несмотря на то, что NIIKA несколько раз применяет эффект к тексту, пользователи с легкостью могут найти всю необходимую информацию.
2. CANN
CANN — американский производитель тонизирующих напитков на основе каннабиса. На сайте история бренда рассказана при помощи захватывающего, тщательно продуманного параллакса.
Разработчики проделали фантастическую работу по оптимизации сайта, чтобы реализовать такой сложный эффект.
Пользователям удобно знакомиться с контентом, а параллакс помогает рассказать историю компании, при этом летающие по экрану пузырьки вызывают ассоциации с шипучим напитком. Кроме того, 3 вкуса CANN эффектно представлены с помощью разных цветов.
Раздел магазина на сайте выглядит просто потрясающе: дизайнеры отказались от модных эффектов, чтобы оптимизировать интерфейс для повышения конверсии.
3. Toy Fight
Toy Fight — креативное агентство из Великобритании. На главной странице сайта реализован простой, но элегантный параллакс-эффект с заметным призывом к действию, который появляется в центре экрана.
Компания использует параллакс на каждой странице для перехода от первого экрана к контенту. Это отличная идея, так как изображения выглядят забавными, а текст рассказывает об услугах компании и прошлых проектах — вы как будто заглядываете за занавес.
Сайт Toy Fight — фантастический пример того, как параллакс-скроллинг помогает рассказывать истории.
4. Garden
Garden — завоевавшая несколько наград дизайн-студия из Португалии. На сайте применен красивый параллакс-эффект: когда пользователь прокручивает страницу, солнце на главном изображении скрывается за горизонтом.
Ниже размещены линейные иллюстрации, которые появляются прямо на глазах по мере продвижения к концу страницы. Такие деликатные анимационные эффекты привлекают внимание потенциальных клиентов к важной информации об услугах студии и заголовкам.
5. Smart Move
Smart Move — это инициатива по привлечению и удержанию специалистов в Большом Эребру в Швеции. Главная страница сайта включает впечатляющий горизонтальный параллакс, который демонстрирует особенности и культуру Эребру со ссылками на страницы с более подробной информацией по каждой теме.
Интерфейс познакомит вас с разными сферами жизни шведов, включая заботу о природе, шоппинг, развлечения, семейную и ночную жизнь.
6. Bertani Wines
Bertani — итальянская винодельческая компания. Чтобы рассказать историю бренда, разработчики сайта добавили горизонтальный параллакс с изображениями, видео и текстом.
Здесь используется сочетание горизонтальной и вертикальной прокрутки, чтобы вы могли совершить путешествие по виноградникам и изучить разные вина. Дизайнеры нашли правильный баланс между сложными эффектами и захватывающим повествованием. Каждая деталь интерфейса имеет свое предназначение, а контент занимает центральное положение.
7. Quentin Goupille
Quentin Goupille — арт-директор, иллюстратор и кинопродюсер-фрилансер из Парижа. С помощью параллакса он рассказывает, какая история стоит за тем или иным проектом в его портфолио.
Каждая страница уникальна — Квентин отправляет пользователей в путешествие по своим фильмам. Результат впечатляет, мы сразу видим, что автор — креативный человек, обладающий талантом рассказчика.
Этот сайт является отличным примером того, как представители творческих профессий могут использовать параллакс, чтобы уникальным и увлекательным образом показать свои работы.
8. Crazy About Eggs
Crazy About Eggs — сайт яичной фермы в Нидерландах, создатели которой содержат кур на свободном выгуле и следят за тем, чтобы они жили в отличных условиях.
Эффекты параллакса на сайте применяются к небольшим элементам и подзаголовкам. В разделе с преимуществами продукта упаковка яиц фиксируется в одной точке, когда мы прокручиваем страницу, в то время как текст появляется то слева, то справа от нее.
Это чрезвычайно креативный способ обратить внимание пользователей на бренд и познакомить их с продуктом. В следующий раз, когда человек окажется в супермаркете, он, скорее всего, сразу же узнает упаковку Crazy About Eggs.
9. Kibana
Kibana — курорт во Франции, который включает жилые помещения, площадки для проведения мероприятий, сады, рынок и другие развлечения на свежем воздухе.
Поверх главного изображения размещается приветствие. Когда вы начинаете прокручивать страницу, то погружаетесь в один из прекрасных садов курорта, и у вас сразу же возникает сильное желание очутиться в этом месте!
Заключение
Параллакс — полезный инструмент, предназначение которого — рассказывать истории, а не просто добавлять бессмысленные анимации, чтобы произвести впечатление на пользователей. Если вы хотите применить его так же эффективно, как дизайнеры в приведенных выше примерах, необходимо много времени, совместной работы и планирования.
Всегда помните о потребностях клиентов и не используйте параллакс, если он негативно повлияет на опыт взаимодействия с интерфейсом.
Читайте также: