Параллакс-скроллинг изображений при помощи CSS 3D и JavaScript

Параллакс-скроллинг изображений при помощи CSS 3D и JavaScript

От автора: эффекта параллакс-скроллинга можно добиться множеством способов, однако я считаю, что большая их часть лишь имитирует глубину изображения. Взглянув на скринсейвер с OS X, я понял, что CSS 3D позволяет по-настоящему сместить изображения на задний план по оси Z, создавая настоящую перспективу и параллакс-эффект во время прокрутки изображений вверх и вниз.

Код нашего урока всего лишь прототип, но я считаю, что он достаточно интересен, чтобы рассказать вам про него. Заодно взгляните на демо на CodePen.

Основы

Код начинается с одного элемента разметки, тега div:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Этот блок будет наполняться изображениями, которые загружаются через JavaScript. Первым делом необходимо прописать стили для блока DIV и изображений внутри него:

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

По методу прогрессивного улучшения необходимо вставить изображения в разметку, написать CSS код к ним и только потом с помощью JS прятать и управлять ими. Так как это всего лишь демо, я выбрал самый прямой маршрут. Имена наших изображений созданы по одному шаблону (wave1.jpg, wave2.jpg… и т.д.), т.е. я могу при помощи JS генерировать имена изображений. Я буду использовать скрипт ниже наряду с другими глобальными переменными:

Мне понадобятся несколько случайных чисел, которые я буду генерировать в функции:

Также мне нужны ссылки загружаемых изображений и текущая ширина и высота экрана (с условием, что браузер открыт на весь экран).

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

После загрузки изображений и последовательной вставки в контейнер им задаются свойства .xPlane, .yPlane и zPlane с произвольными значениями. Данные свойства отвечают за позиционирование элементов в 3D пространстве. Мы оставили пустыми атрибуты alt в демо.

И наконец, мы двигаем изображения при помощи функции:

Чтобы все заработало, в конце скрипта необходимо вызвать подходящие функции:

Улучшения

Наш код – это прототип, и он немного грубоват. В него можно внести очевидные улучшения:

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

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

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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