Форум Портала BREND-CS
Сегодня Воскресенье | Дата: 19.11.2017 | Время: 19:09
Регистрация | Вход
Доброго времени суток, Гость! Авторизуйся или зарегистрируйся

Новые сообщения · Участники · Правила форума · Поиск · RSS

Страница 1 из 11
Форум » Web-мастер » Скрипты для uCoz » Шапка с parallax-эффектом на jQuery
Шапка с parallax-эффектом на jQuery
Ceemly Суббота, 04.05.2013, 13:03 | Сообщение # 1

Offline
Сообщений: 59
Награды:0


Красивая шапка эффектом parallax на тему космос, планеты. Неординарность оформления шапки будет притягивать взгляды посетителей вашего сайта.
ВНИМАНИЕ!!! Часть стилей мы используем исключительно для демонстрационной страницы. Под свой шаблон подгоняйте сами.

Перед </head>:
Код
<script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/jquery-1.6.4.min.js"></script>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/jquery.jparallax.min.js"></script>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/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://webo4ka.ru/Ucoz7/chapka_parallax/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://webo4ka.ru/Ucoz7/chapka_parallax/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://webo4ka.ru/Ucoz7/chapka_parallax/showcase-layer1.png" alt="" style="height:210px;"/>   
   </div>   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/showcase-layer2.png" alt="" style="height:244px;"/>   
   </div>   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/showcase-layer3.png" alt="" style="height:210px;"/>   
   </div>   
   </div>


2 вариант:

Перед </head>:
Код
<script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/jquery-1.6.4.min.js"></script>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/jquery.jparallax.min.js"></script>   
   <script type="text/javascript" src="http://webo4ka.ru/Ucoz7/chapka_parallax/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://webo4ka.ru/Ucoz7/chapka_parallax/2variant/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://webo4ka.ru/Ucoz7/chapka_parallax/2variant/head.jpg');}   
   .parallax-viewport {   
   position: relative;   
   overflow: hidden;   
   }   
   .parallax-layer {   
   position: absolute;   
   }   
   </style>


Разметка шапки, в начало <body>
Код
<div id="parallax">   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/2variant/head_1-trans.png" alt="" style="width:1140px; height:224px;"/>   
   </div>   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/2variant/head_2-trans.png" alt="" style="width:1120px; height:224px;"/>   
   </div>   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/2variant/head_3-trans.png" alt="" style="width:1040px; height:224px;"/>   
   </div>   
   <div class="parallax-layer">   
   <img src="http://webo4ka.ru/Ucoz7/chapka_parallax/2variant/head_4-trans.png" alt="" style="width:1023px; height:224px;"/>   
   </div>   
   </div>


готово!
Форум » Web-мастер » Скрипты для uCoz » Шапка с parallax-эффектом на jQuery
Страница 1 из 11
Поиск: