Стильная шапка с parallax-эффектом на jQuery на тему НЛО, космос.Эффект трехмерности смотрится весьма красиво и эффектно, притягивая взгляд посетителей своей оригинальностью идеи.
ВНИМАНИЕ !!! Часть стилей мы используем исключительно для демонстрационной страницы. Под свой шаблон подгоняйте сами.
Перед /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 {
background: url('http://megascripts.ru/demo/shapka_NLO/bg.jpg') top left repeat-x;}
#parallax-header { height:200px; background-color:gray;}
#parallax{ height:224px; overflow:hidden; position:absolute; top:0; width:990px;
background-image:url('http://megascripts.ru/demo/shapka_NLO/head.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_NLO/head_1-trans.png" alt="" style="width:1140px; height:224px;"/> </div> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_NLO/head_2-trans.png" alt="" style="width:1120px; height:224px;"/> </div> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_NLO/head_3-trans.png" alt="" style="width:1040px; height:224px;"/> </div> <div class="parallax-layer"> <img src="http://megascripts.ru/demo/shapka_NLO/head_4-trans.png" alt="" style="width:1023px; height:224px;"/> </div> </div>
