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


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

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

Шапка для сайта с parallax-эффектом на jQuery

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

14.11.2012, 20:26
Стильная шапка с parallax-эффектом на jQuery на тему НЛО, космос.Эффект трехмерности смотрится весьма красиво и эффектно, притягивая взгляд посетителей своей оригинальностью идеи.
ВНИМАНИЕ !!! Часть стилей мы используем исключительно для демонстрационной страницы. Под свой шаблон подгоняйте сами.
Перед /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 {
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:
Code
<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>


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





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

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

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 6146 | Загрузок: 551 | Комментарии: 7 | Рейтинг: 4.2/22
Теги: шапка сайта, скрипт, паралакс шапка, parallax-эффект
Всего комментариев: 6
Сообщение №6 от Олег
Добавлен: 10.01.2014

Конечно ничего не получиться у Вас два одинаковых стиля
Удалите из CSS

#parallax-header { height:200px; background-color:gray;}

#parallax {height:224px; overflow:hidden; position:absolute; top:0; left:0; width:990px;
}

.parallax-viewport {
position: relative; /* relative, absolute, fixed */
overflow: hidden;

}
.parallax-layer {
position: absolute;

}
Сообщение №5 от Олег
Добавлен: 10.01.2014

Извините добавьте margin: auto; в #parallax-header
#parallax-header {margin: auto; height:224px; background-color:gray;}
Сообщение №4 от Владимир
Добавлен: 10.01.2014

Не получилось по центру ПОМОГИТЕ ПЛИЗ
Сообщение №3 от Олег
Добавлен: 17.11.2013

Добавьте align="center" - будет по центру
<div id="parallax" align="center">
Сообщение №2 от Райнур
Добавлен: 17.11.2013

Спасибо , красивая шапка)
Сообщение №1 от Райнур
Добавлен: 17.11.2013

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

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


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

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

Друзья сайта