Главная » Раздел uCoz » Скрипты и модификации для Ucoz


Шапка с parallax-эффектом на jQuery

4476
10 из 10
Проголосовало: 9






Красивая шапка эффектом 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>


готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n-й материал
Источник: Неизвестен
Ваше мнение о материале Загрузка
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 433
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Гость, авторизуйся и общайся в чате...
Последние комментарии
  • mrnoobsky написал:
    • Это моя работа, которая велась давольно таки давно smile Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy
  • Snoopak написал:
    • 111 мегабайт? wtf? Что в архив напихали?
  • mrnoobsky написал:
    • Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
  • geleson2222 написал:
    • ?
  • Doc120 написал:
    • /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
    opacity:0.1 ; это легальное скрытее $POWERED_BY$
    ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
    Последние темы
    Опрос
    338
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    		 0
    наших
    		 0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Друзья сайта:
    Связаться с администратором для дружбы! В Вовчик
    Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
    Web-мастер системы uCoz R Roman_Domnin
    Связаться с администратором для дружбы! В Вовчик
    Связаться с администратором для дружбы! В Вовчик
    Топ пользователей: