Шапка с parallax-эффектом на jQuery
Красивая шапка эффектом parallax на тему космос, планеты. Неординарность оформления шапки будет притягивать взгляды посетителей вашего сайта.
Перед /head :
Перед /head :
| <script type="text/javascript" src="http://megascripts.ru/demo/shapka_NLO/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://megascripts.ru/demo/shapka_NLO/jquery.jparallax.min.js"></script> <script type="text/javascript" src="http://megascripts.ru/demo/shapka_NLO/jquery.event.frame.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { $('#parallax .parallax-layer') .parallax({ mouseport: $('#parallax') }); }); </script> <style type="text/css"> body {margin:0; background: url('http://megascripts.ru/demo/shapka_kosmos/bg.jpg') top left repeat-x;} #parallax-header {height:240px; background-color:gray;} #parallax{ height:224px; overflow:hidden; position:absolute; top:0; width:100%; background-image:url('http://megascripts.ru/demo/shapka_kosmos/showcase-bg.jpg');} .parallax-viewport { position: relative; overflow: hidden;} .parallax-layer { position: absolute;} </style> |
Разметка шапки, в начало body:
| <div id="parallax"> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_kosmos/showcase-layer1.png" alt="" style="height:210px;"/> </div> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_kosmos/showcase-layer2.png" alt="" style="height:244px;"/> </div> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_kosmos/showcase-layer3.png" alt="" style="height:210px;"/> </div> </div |
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: Turbo
Комментарии (0)