В верх страницы

В низ страницы

..

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » .. » ­Азбука Web дизайна » шапки для сайта


шапки для сайта

Сообщений 1 страница 2 из 2

1

Стильная шапка с 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>

http://uploads.ru/i/K/b/k/Kbk67.png

DEMO

0

2

Технология Flash в сайтостроении в последнее время получила очень широкое развитие. Сегодня сложно найти сайт в Сети, который не использует на своих страницах флеш. Это может быть и меню на флеше, и флеш-шапка сайта, и флеш-заставка, и даже сайт целиком. Сайты, которые используют flash, очень красиво и эффектно смотрятся, показывают более высокий уровень разработки и повышают визуальную стоимость сайта. Интеграция flash на веб-сайт некоторым образом украшает сайт, если при этом не перегружает его своими эффектами.
Дело в том, что Flash - это не обычная растровая (gif, jpg, bmp и т.п.) картинка и не html, а мультемидийная технология. Как у любой технологии, у этой есть свои преимущества и недостатки.
demo
http://uploads.ru/i/K/b/k/Kbk67.png

пароль к архиву

2dpower.top

0

Похожие темы


Вы здесь » .. » ­Азбука Web дизайна » шапки для сайта