Потрясающий эффект параллакса для сайта на JS
Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне. Сегодня мы бы хотели продемонстрировать пример реализации еще одного эффекта, который будет Вам весьма интересный.
Мы получили параллакс, который реагирует на вертикальное передвижение мыши, при этом некоторые элементы будут немного спрятаны за полем зрения посетителя, при движении они будут появляться.
Шаг 1. HTML
Для начала нам необходимо по очередности подключить слоя изображений, для этого мы присваиваем классы, каждый класс будет иметь свои параметры в стилях:
1 2 3 4 5 6 7 8 |
<body class="b-page b-page_holiday-face b-page_holiday-bg_2"> <div data-id="1" class="holiday-face holiday-face_parallax"> <div data-offset="50" class="holiday-face__item holiday-face__item_5"></div> <div data-offset="70" class="holiday-face__item holiday-face__item_4"></div> <div data-offset="30" class="holiday-face__item holiday-face__item_3"></div> <div data-offset="20" class="holiday-face__item holiday-face__item_2"></div> <div data-offset="50" class="holiday-face__item holiday-face__item_1"></div> </div> |
Все это будет обвернуто в единый класс, которые будут определять параметры контейнера и общее положение его на странице, давайте перейдем к следующему шагу.
Шаг 2. CSS
Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.b-page_holiday-face .holiday-face_parallax { background-color: #3f2a20; transform: translate3d(0px, 0px, 0px); } .b-page_holiday-bg_2 .holiday-face { background-image: url("/euKxNRPgI8_zZrSmcEBzKb7_0.jpg"); } .holiday-face { background: none no-repeat scroll center center / cover #3f2a20; bottom: 0; left: 0; min-height: 540px; min-width: 875px; position: fixed; right: 0; top: 0; z-index: -1; } .holiday-face_parallax .holiday-face__item_5 { background-image: url("/wKRfV_hlcMYTwL0tLdTfkfD4s.jpg"); } .holiday-face_parallax .holiday-face__item_4 { background-image: url("/ryCqbMR3r4SS8ndABXAOfQ-0I.png"); } .holiday-face_parallax .holiday-face__item_3 { background-image: url("/bH6gkCAQB_X8LNVg3ilwwhG40.png"); } .holiday-face_parallax .holiday-face__item_2 { background-image: url("/iFWNN9Fl1VGxk8SI9LGljdhUQ.png"); } .holiday-face_parallax .holiday-face__item_1 { background-image: url("/RVWSpixldgXfBaQy0T5Y3vaUE.png"); } .b-page_holiday-bg_2 .holiday-face-words { background-image: url("/S5_Vzf8MO5aH8C-FJY_GwZCBU.svg"); } |
Затем мы по очередности заливаем картину изображениями, в результате чего мы получаем готовую картинку, разделенную по слоям, но это еще не все, нам необходимо все оживить.
Шаг 3. JS
Нам осталась маленькая деталь, это подключения параллакса и его привязке к движению курсора мыши, для этого нам понадобится небольшой скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(window).on('mousemove', function(e) { var w = $(window).width(); var h = $(window).height(); var offsetX = 0.5 - e.pageX / w; var offsetY = 0.5 - e.pageY / h; $(".holiday-face__item").each(function(i, el) { var offset = parseInt($(el).data('offset')); var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)"; $(el).css({ '-webkit-transform': translate, 'transform': translate, 'moz-transform': translate }); }); }); |
В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 02.03.2015 в 10:30, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |