Здравствуйте дорогие друзья. Недавно мне попался один заказчик, который захотел иметь дизайн с параллакс эффектом (jquery.parallax).
Если кто не знает, то:
jQuery.Parallax – это библиотека jQuery, с помощью которой можно создавать эффект 3D движения на сайте, то есть дизайн получается более динамичным и запоминающимся. А слово Параллакс, в науке, означает изменение видимого положения тела относительно заднего фона в зависимости от положения наблюдателя.
jQuery.Parallax – это библиотека jQuery, с помощью которой можно создавать эффект 3D движения на сайте, то есть дизайн получается более динамичным и запоминающимся.
А слово Параллакс, в науке, означает изменение видимого положения тела относительно заднего фона в зависимости от положения наблюдателя.
Отражение солнца в воде сдвинуто относительно столба, это и есть Параллакс в природе
Я сам никогда не сталкивался с параллакс эффектом и поэтому пришлось с нуля разбираться в этом вопросе, так как заказчик оказался очень настойчивым 🙂
Существует очень много разновидностей jQuery.parallax, но для моего макета нужен именно с эффектом горизонтального движения, когда разные части фона двигаются с разной скоростью, тем самым создавая эффект трёхмерности.
jQuery.parallax
В этой статье, я вам покажу, как очень быстро подключить библиотеку parallax к своему сайту и как оживить дизайн. А теперь давайте начнём разбираться.
jParallax основан на перемещении слоёв, которые позиционируются абсолютно (position:absolute;), слои двигаются в ответ на перемещение мыши.
Основная фишка заключаться в том, что из-за разного размера слоёв, движения получаются с разной скоростью.
Пример параллакс эффекта:
А вот попроще пример с текстом:
Для начала создайте два файла, в которых мы будем указывать оформление нашего параллакс эффекта — style.css и index.html.
style.css
index.html
[html]<link rel="stylesheet" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <script src="jquery.parallax.js"></script> <script> jQuery(document).ready(function(){ jQuery(‘#parallax .parallax-layer’) .parallax({ mouseport: jQuery(‘#parallax’) }); }); </script> </head> <body> <div class="site_wrap"> <div class="parallax-viewport" id="parallax">
<!— слои parallax с разной шириной —> <div class="parallax-layer" style="width:600px; height:300px;"> <img src="images/2.png" alt="" /> </div> <div class="parallax-layer" style="width:500px; height:280px;"> <img src="images/3.png" alt="" style="position:absolute; top:5px; left:-10;"/> </div> <div class="parallax-layer" style="width:400px; height:250px;"> <img src="images/4.png" alt="" style="position:absolute; top:12px; left:16;"/> </div>
</div> </div>[/html]
Как видите, мы подключили библиотеку jQuery с репозитория Гугла, затем сам скрипт jquery.parallax.js (скачать его можете тут или в конце статьи будет ссылка на архив с исходником). Далее мы подключаем обработчик, который фиксирует перемещение по обозначенным слоям.
jquery.parallax.js
Изображения (слои), поидеи должны быть разной ширины, чтобы перемещение было с разной скоростью, но можно сделать и с одинаковой шириной и изменять уже параметр width у каждого изображения в отдельности. [sc name=»728 text» ]
width
[css] .parallax-viewport { /* Стили основного бокса */ width: 100%; height: 20em; background-image: url("images/1.jpg"); } .parallax-viewport { /* Тут не указана ширина, так как все слои в моём примере имеют одинаковую width и height*/ position: relative; overflow: hidden; } .parallax-layer { /* Обязательное позиционирование для каждой картинки */ position: absolute; } .site_wrap { max-width:48rem; min-width:292px; width:100%; margin: 0px auto; }[/css]
У нас слои разного размера и поэтому по ширине не будет чётких границ, чтобы сделать стиль отображения «из окна» (как в примере выше), надо обернуть дивы с картинками вот в такой класс:
[css].parallax-viewport {position: relative; overflow: hidden; width:npx; height:npx;}[/css]
Мы указываем фиксированную ширину, высоту «окна» и обрезаем все части (overflow: hidden), которые выступают за грани нашего окна. Для наглядности я ещё оформил моё окно в рамку, простым бордером и отступом padding.
padding
Вот в принципе и всё, настроить параллакс эффект очень просто. Скачать мои исходники второго примера вы можете по этой ссылке.
Библиотека jQuery.Parallax имеет очень много возможностей и вот такое смещение, только малая часть того, чего можно добиться с помощью этой замечательной библиотеки.
Свои следующие наработки я обязательно опубликую на блоге, а пока подписывайтесь на обновление блога, чтобы не пропустить новые посты и посмотрите примеры интересных сайтов с использованием jQuery.Parallax:
yparallax
false
На этом всё, до скорых встреч. [sc name=»728 text» ]
