Легкий параллакс эффект с помощью JavaScript и CSS трансформаций

Легкий параллакс эффект с помощью JavaScript и CSS трансформаций

От автора: в последнее время ряд сайтов, в том числе рекламная страница Bioware игры Mass Effect Andromeda и работа агентства Active Theory Under Armour получили параллакс эффект, когда движение мыши связано с движением элемента на странице в противоположном направлении. Я захотел воссоздать этот эффект на чистом JavaScript и современных свойствах CSS. Пример моих стараний можно увидеть ниже.

Итоговое демо урока.

Выходим на ринг

Разметка состоит из контейнера div, изображения, заголовка и основного текста (взятого из произведения Джека Лондона Кусок мяса) внутри еще одного div:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Боксера мы отделили от фона и сохранили в PNG с альфа маской. С помощью конвертации изображения в 16-bit мы уменьшили размер файла.

Стили внешнего элемента #boxercontainer: обратите внимание, что background-image сделан немного больше контейнера и расположен чисто по центру. Это очень важно, но об этом позже:

У внутреннего блока div задана прозрачность, светло-серый фон для увеличения контрастности текста:

Изображение позиционировано абсолютно и опущено так, чтобы нижняя часть ног боксера выходила за пределы родительского элемента и скрывалась при помощи overflow: hidden. Вокруг боксера применен фильтр drop-shadow, который дает намного меньший размер файла, нежели рисовать тень в PNG. Как мы сейчас увидим, такая тень делает изображение более динамичным.

Боксеру присвоено свойство z-index со значением 2, что помещает его визуально выше блока div с текстом, но из-за этого тень будет падать на слова. Чтобы поправить это, я изменил текст:

Легкий параллакс эффект с помощью JavaScript и CSS трансформаций

Значение z-index у текста теперь больше, и тень проваливается под текст, но расположена выше рамки блока div.

Центрируем

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

Легкий параллакс эффект с помощью JavaScript и CSS трансформаций

Скрипт начинает с идентификации элементов. Атрибут id в JS автоматически превращается в ссылку, а для получения боксера используется querySelector:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Кроме того, нам нужно определить положение мыши внутри boxercontainer, для чего я использую функцию:

Порхай как бабочка

Такие эффекты обычно реагируют на движение мыши на странице:

Переменная distX – горизонтальное расстояние от текущего положения мыши до изначального центра изображения боксера. Переменная distY – вертикальное расстояние. Если разница по вертикали (положительная или отрицательная) меньше 500px, а горизонтальное расстояние меньше 200px, мы двигаем боксера с помощью CSS трансформаций:

оба расстояния умножаются на -1 (положительное значение становится отрицательным и наоборот);

результат делится на 12, чтобы уменьшить отношение движения между мышью и изображением (соотношение 1:1 между положением мыши и изображением приведет к слишком резким движениям).

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

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

Чтобы воссоздать такой эффект, я также сдвигаю background-image бетонной стены. В колбэк функцию addEventListener нужно добавить код ниже в конец скрипта:

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

Я двигаю изображение на основе положения мыши, а не касаний, так как взрослые, как правило, не лапают постоянно экран.

Исключение

Есть общее правило. Параллакс эффект хорошо работает на больших экранах и ноутбуках и совсем не работает на маленьких разрешениях. Эффект создан на JS, поэтому мы должны определять ширину экрана с помощью matchMedia:

Условие if для движения изображения и фона меняется на:

В CSS @media запросах есть дополнительные изменения для смены дизайна на маленьких экранах. Более подробно в CodePen демо.

Для людей с различными расстройствами

Параллакс эффект может оказать негативное воздействие на людей с расстройствами вестибулярного аппарата (чувствительных к визуальному движению), вплоть до тошноты и припадков. Было бы хорошо, как минимум, показывать предупреждение или какой-то другой знак того, что на странице есть эффект движения. Разработчики браузеров сейчас работают над настройкой «уменьшить движение». В ближайшем будущем движение будет определяться с помощью @media запроса. Эффекты типа палаллакса будут автоматически выключаться на страницах для людей с такими расстройствами.

Заключение

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree