Шаг № 1 - Нам понадобится Прежде всего, нам понадобится графика (картинки). Они находятся в исходниках к уроку.
Также нам понадобится фреймворк jQuery и плагин "easing" (для плавного открытия и закрытия).
Предупреждение для пользователей IE6: возможно неправильное отображение демо, а именно прозрачности PNG.
Шаг № 2 - HTML
Code
<head>
<script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" href="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">http://jqueryjs.googlecode.com/files/jquery-1.3.2.js</a>"></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>
Шаг № 3 - CSS
Code
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #4f3722 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;
}
Мы создали два блока для "штор" (.leftcurtain и .rightcurtain), которые закреплены по обеим сторонам. Это достигнуто благодаря CSS и атрибутам top и left. Вы можете заметить, что каждой шторе мы назначили ширину, 50% и 51%. Разница в ширине скрывает некоторые неправильные углы при закрытой шторе. В уроке использован z-index для того, чтобы шторы всегда были поверх других элементов.
Класс .logo содержит содержание того, что находится под шторой.
Класс .rope помещает графику с веревкой поверх всего и прячет часть над экраном, чтобы достигался эффект "дергания за веревку".
Шаг № 4 - Открываем шторы с помощью jQuery
Code
<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>
Когда все готово, мы утверждаем, что шторы закрыты с помощью переменной $curtainopen = false. Эта переменная используется для определения состояния штор, и какую анимацию выполнять.
Еще одно события происходит при нажатии .rope. Данное события запускает открытие\закрытие штор.
