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

параллакс сайт мыши
(Изображение предоставлено: Рено Ролингер)

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

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

Вы также можете попробовать один из этих конструкторы сайтов , и пока вы рассматриваете производительность своего сайта, проверьте веб хостинг сервис работает на вас. У вас есть медиа-сайт? Резервное копирование с надежным облачное хранилище .



01. Определите структуру документа HTML.

параллакс сайт мыши

Открывая монохромный экран-заставку, сайт сразу же сопоставляет анимированные 3D-фоны с японской типографикой.(Изображение предоставлено: Рено Ролингер)

Первый шаг - определить структуру HTML-документа. Он состоит из контейнера HTML, который описывает документ как имеющий разделы для заголовка и тела. В то время как раздел заголовка связывает внешние файлы JavaScript и CSS, раздел body используется для определения элементов содержимого страницы на шаге 2.

Parallax Background *** STEP 2 HERE

02. Определите содержание HTML.

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

Hello!

03. Создайте контейнер параллакса CSS.

параллакс сайт мыши

импорт файлов иллюстратора в After Effects
Прокручивая вниз, все становится более красочным, с поощрением следовать за персонажем кошки и щелкать мышью, чтобы перейти к основному портфолио.(Изображение предоставлено: Рено Ролингер)

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

html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. Настройка слоев параллакса CSS.

Каждый из слоев изображения настроен на использование абсолютного позиционирования с размером, соответствующим окну браузера. Изображение параллакса в этом примере будет основано на шаблоне определенного размера, который настроен на повторение. Вы можете выбрать повторение изображения только по вертикали с помощью repeat-y или по горизонтали с помощью repeat-x.



[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. Используйте фоновые слои CSS

параллакс сайт мыши

Стремясь найти работу по разработке в рекламе сайта, Рено не упускает возможности продемонстрировать свое мастерство в WebGL.(Изображение предоставлено: Рено Ролингер)

Хотя каждый из слоев изображения имеет общие настройки положения и размера, определенные на шаге 4, каждый слой использует уникальное изображение. Селектор nth-child используется для ссылки на каждый отдельный элемент в контейнере параллакса. Атрибут background-image используется для рисования двух линий, которые создают эффект сетки при мозаике. Нижние слои используют более темные цвета, чтобы обеспечить ощущение глубины.

[data-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. Выполните запуск уровня JavaScript.

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

боулинг для коломбины полный фильм youtube
window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. Расчет движения мыши в JavaScript

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

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

Эта статья изначально была опубликована в журнале Creative Web Design. Веб-дизайнер . Купите выпуск 290 сейчас.

Статьи по Теме: