Интересная анимация с помощью jQuery

В сегодняшнем уроке мы создадим анимацию "Открытие занавеса" с помощью jQuery.

Это довольно забавная анимация, которая очень понравится Вашим посетителям.

demosourse

Шаг № 1 - Нам понадобится

Прежде всего, нам понадобится графика (картинки). Они находятся в исходниках к уроку.

Также нам понадобится фреймворк jQuery и плагин "easing" (для плавного открытия и закрытия).

Предупреждение для пользователей IE6: возможно неправильное отображение демо, а именно прозрачности PNG.

Шаг № 2 - HTML

<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

*{
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

<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. Данное события запускает открытие\закрытие штор.

Заключение

Это довольно интересное применение jQuery и Вам решить, где его употребить. При небольшой доработке и хорошем воображении может получиться что-нибудь уникальное.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 14 Августа 2009
Просмотров: 41412
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Августа 2009 07:10
    positive
    Ух ты! Супер!
  • 15 Августа 2009 09:03
    Евгений
    Да, классный урок! И к тому же 100-й в разделе jquery!
  • 15 Августа 2009 09:41
    Виталий
    Красота, обалдеть. Не думал, что такое возможно. Спасибо!
  • 15 Августа 2009 10:11
    kickerps
    клёвая анимация =) з.ы. - с юбилеем 100ого урока =)
  • 15 Августа 2009 12:22
    Reet
    евгений когда новый курс выйдет?
  • 15 Августа 2009 13:24
    Евгений
    Грамотная штука, красиво и очень творчески)
  • 15 Августа 2009 15:14
    Arnold
    Если никто не против, то я поставлю ее на свой сайт. Большое спасибо. Очень даже нужно:)
  • 15 Августа 2009 22:52
    Святослав
    Да, супер, больше бы таких! Спасибо!
  • 16 Августа 2009 00:09
    Grigory
    Автор: Arnold (2009-08-15 15:14:40) Если никто не против, то я поставлю ее на свой сайт. Большое спасибо. Очень даже нужно:) А разве уроками которые даёт Евгений или Зинаида нельзя пользоваться? Или необходимо какое-то отдельное разрешение? Что-то об этом я не слышал. Евгений, Зинаида, огромное вам спасибо и низкий поклон. С уважением, Григорий.
  • 16 Августа 2009 09:14
    Святослав
    Grigory, посмотрите под статьей правила перепечатки. Можно, но с определеенными правилами.
  • 17 Августа 2009 07:10
    Grigory
    Святослав, а чем Вас не устраивают правила? Не Вы автор, не меняйте содержание, иначе: - плагиат. С уважением, Григорий.
  • 17 Августа 2009 16:48
    Любительница
    Вообще класс!!! Вы как всегда на высоте!!! Постоянно посещаю Ваши уроки! Очень довольна!!! Постоянно интересные и доступные пониманию... :) Как хорошо, что есть возможность где "подсмотреть"! Спасибо большое!!!
  • 25 Августа 2009 14:20
    DragonVs
    Класс, мне очень нравится!
  • 27 Октября 2009 16:01
    sicret
    по мне так не оч. к тому же вставить его негде.... и в IE тормозит немного IE 8 Opera 10 в конце подтармаживает...
  • 11 Ноября 2009 17:48
    Alexei
    Не подскажете, как сделать чтобы положение занавеса сохранялось в куки?
  • 10 Февраля 2010 23:42
    aracaim
    Уже голову сломал, и знаю что вопрос мой не серьезен, но все таки как все это дело реализовать на CMS DLE? картинка есть а чтоб работала не получается, что я не так делаю, в чем моя ошибка? http://i076.radikal.ru/1002/b3/11ff2dfc7698.jpg http://s44.radikal.ru/i105/1002/58/5df0a65698ca.jpg http://s006.radikal.ru/i215/1002/ad/c79293c26493.jpg http://s003.radikal.ru/i204/1002/78/13ad8fcc777c.jpg как я уже сказал картинка есть а работать не хочет, ответа в гугле найти не могу, помогите пожалуйста? За ранее спасибо!!!
    • 4 Апреля 2011 00:46
      netdog
      ну как разобрался?мне тоже интересно)
  • 11 Февраля 2010 05:19
    Владимир
    Снимаю свой вопрос ниже, разобрался методам научного тыка, если кому интересно то проблема была в том что жквери надо подключить строчкой выше скриптов шаблона, вот пример мой: http://s005.radikal.ru/i211/1002/77/018f5468308c.jpg есть еще маленький нюанс так сказать, я не понял почему без ссылки на гугл не работает, хотя файл с библиотекой подключен и на оборот с ссылкой на гугл без библиотеки тоже не работает, есть какие? соображения?
  • 16 Августа 2010 11:28
    x_KrIvEdKo_x
    Подскажите пожалуйста как сделать так чтоб шторы оставались открыты при переходе на другую страницу, пол ночи мозги ломал, так ничего и не пришло З.Ы. Очень надо, не поленитесь напечатать пару строчек кода, ну или ссылку кинуть на полезное, заранее огромное спасибо !
  • 11 Марта 2011 12:46
    denx_b
    демонстрировал уже эту штуку в видео уроке по jQuery =) да я его обладатель) очень между прочим не плохо! я бы сказал даже очень очень =D
  • 28 Марта 2011 18:54
    ghbrjkbcn
    Прикольно можно протестировать где нить есть да-Же идея где ))))
  • 3 Ноября 2011 14:11
    mister__art
    Да.. действительно а как сделать чтоб шторы не закрывались при переходе на следующую страничку..помогите Я так понимаю что положение занавеса надо сохранять в Куки но как это сделать..????
  • 30 Января 2013 14:21
    Kutikl
    Подскажите пожалуйста, как сделать, что-бы шторы сами открывались при загрузке страницы или через несколько секунд. Помогите пожалуйста, очень надо
  • 26 Сентября 2014 20:52
    balanovsky
    Очень классная анимация) Занимаю место в Раю для человека который это придумал и опубликовал)
^ Наверх ^