Здравствуйте дорогие друзья. Недавно мне попался один заказчик, который захотел иметь дизайн с параллакс эффектом (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
К сведению, если вам нужна торцевая разделочная доска, то оформить свой заказ вы сможете на интернет-ресурсе etwood.ru. Уверен, вы останетесь довольны соотношением цена-качество!
Изображения (слои), поидеи должны быть разной ширины, чтобы перемещение было с разной скоростью, но можно сделать и с одинаковой шириной и изменять уже параметр 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» ]
