Шапка с parallax-эффектом на jQuery - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1107
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Шапки для сайта

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

Хочешь сказать спасибо? Кликни на рекламный баннер.

15.11.2012, 16:28
Красивая шапка эффектом parallax на тему космос, планеты. Неординарность оформления шапки будет притягивать взгляды посетителей вашего сайта.
ВНИМАНИЕ !!! Часть стилей мы используем исключительно для демонстрационной страницы. Под свой шаблон подгоняйте сами.
Перед /head :
Code
<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:
Code
<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>

Думаю Вам понравилось.
Все изображения, css и jquery используемые в материале находятся в архиве.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 13416 | Загрузок: 1058 | Комментарии: 2 | Рейтинг: 4.4/34
Теги: шапка сайта, скрипт, паралакс шапка, parallax эффект, Шапка
Всего комментариев: 2
Сообщение №1 от Андрей
Добавлен: 01.04.2016

помогите поставить скрипт на сайт
Сообщение №2 от Олег
Добавлен: 02.04.2016

А что помочь то, всё же описано.
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Миндаль родственник персика.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта