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

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

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

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

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

<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;

}

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

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

$(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. Данное события запускает открытие\закрытие штор. Вот и все. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.