Красивая шапка для сайта c помощью jQuery

Красивое оформление сайта всегда заставляет пользователя привлечь свой взор к ресурсу. Никому не секрет, что унылые дизайны сайтов отходят на задний план с выходом новых технологий. Поэтому мы рассмотрим как можно красиво оформить часть сайта, создав эффект в стиле «открытие занавесы» с помощью jquery. Идея заключается в том, что вы дергаете за веревочку и занавесы раскрываются в разные стороны. Это довольно интересное применение jQuery и Вам решить, где его употребить. При небольшой доработке и хорошем воображении..

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

..может получиться что-нибудь уникальное. Если вы заметили, то изображения находятся в формате .png, тут следует заметить, что в IE6 (Как свидетельствует статистика, люди еще пользуются таким «браузером»), возможно неправильное отображение демо, а именно прозрачности PNG. Прежде чем приступить к уроку следует заметить, что мы будем использовать фреймворк jQuery и плагин «easing» (для плавного открытия и закрытия). И так, приступим, для начала мы рассмотрим разметку HTML:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Красивая шапка для сайта c помощью jQuery | Демонстрация для сайта RUDEBOX</title>
 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
 <script src="jquery.easing.1.3.js" type="text/javascript"></script>

</head>

<body>
 <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div>
 <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div>
 <img class="logo" src="images/buildinter.png"/>
 <a class="rope" href="#">
 <img src="images/rope.png"/>
 </a>
</body>

<head>

<title>Красивая шапка для сайта c помощью jQuery | Демонстрация для сайта RUDEBOX</title>

</head>

<body>

</a>

</body>

Далее рассмотрим стили CSS. Для этого мы создадим два блока «штор» (.leftcurtain и .rightcurtain), которые закреплены по обеим сторонам. Это достигнуто благодаря CSS и атрибутам top и left.

*{
 margin:0;
 padding:0;
 }
 body {
 text-align: center;
 background: #000 url('images/darkcurtain.jpg') repeat-x;
 }
 img{
 border: none;
 }
 .leftcurtain{
 width: 50%;
 height: 495px;
 top: 0px;
 left: 0px;
 position: absolute;
 z-index: 2;
 }
 .rightcurtain{
 width: 51%;
 height: 495px;
 right: 0px;
 top: 0px;
 position: absolute;
 z-index: 3;
 }
 .rightcurtain img, .leftcurtain img{
 width: 100%;
 height: 100%;
 }
 .logo{
 margin: 0px auto;
 margin-top: 150px;
 }
 .rope{
 position: absolute;
 top: -40px;
 left: 70%;
 z-index: 4;
 }

margin:0;

padding:0;

}

body {

text-align: center;

background: #000 url('images/darkcurtain.jpg') repeat-x;

}

img{

border: none;

}

.leftcurtain{

width: 50%;

height: 495px;

top: 0px;

left: 0px;

position: absolute;

z-index: 2;

}

.rightcurtain{

width: 51%;

height: 495px;

right: 0px;

top: 0px;

position: absolute;

z-index: 3;

}

.rightcurtain img, .leftcurtain img{

width: 100%;

height: 100%;

}

.logo{

margin: 0px auto;

margin-top: 150px;

}

.rope{

position: absolute;

top: -40px;

left: 70%;

z-index: 4;

}

Вы можете заметить, что каждой шторе мы назначили ширину, 50% и 51%. Разница в ширине скрывает некоторые неправильные углы при закрытой шторе. В уроке использован z-index для того, чтобы шторы всегда были поверх других элементов. Класс .logo содержит содержание того, что находится под шторой. Класс .rope помещает графику с веревкой поверх всего и прячет часть над экраном, чтобы достигался эффект «дергания за веревку».

Красивая шапка для сайта c помощью jQuery

Далее рассмотрим jQuery. И так, когда все готово, мы утверждаем, что шторы закрыты с помощью переменной $curtainopen = false. Эта переменная используется для определения состояния штор, и какую анимацию выполнять.

<script type="text/javascript">
 $(document).ready(function() {

 $curtainopen = false;

 $(".rope").click(function(){
 $(this).blur();
 if ($curtainopen == false){
 $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
 $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
 $(".rightcurtain").stop().animate({width:'60px'},2000 );
 $curtainopen = true;
 }else{
 $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
 $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
 $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
 $curtainopen = false;
 }
 return false;
 });

 });
 </script>

$(document).ready(function() {

$curtainopen = false;

$(".rope").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

}else{

$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'50%'}, 2000 );

$(".rightcurtain").stop().animate({width:'51%'}, 2000 );

$curtainopen = false;

}

return false;

});

</script>

Еще одно события происходит при нажатии .rope. Данное события запускает открытие\закрытие штор. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Красивая шапка для сайта c помощью jQuery

Читайте также:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

Красивая шапка для сайта c помощью jQuery

Читайте также:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи