Всем привет. Решил сегодня опубликовать первый урок, такой себе «глобальной» анимации с помощью jQuery. Ведь все не заканчивается только различными эффектами для меню, ссылок и всплывающими окнами. С помощью jQuery довольно легко можно заставить двигаться различные предметы так, как нужно нам, в итоге получив потрясную анимацию не хуже по качеству чем тот-же «флеш». Кстати, я лично считаю данный формат не перспективным (соглашусь с производителями ОС для смартфонов и еще много с кем) и перестал изучать Adobe Flash, взамен начав мучать 3Ds Max и Adobe After Effects. Конечно сравнивать этот софт нет смысла, перед ними стоят абсолютно разные задачи, но радости от последних я получаю намного больше.
Так, вернемся к нашей анимации. Посмотри демо. Правда отличная анимация? Как насчет использовать сие как заглушку для отключенного сайта или сайта в стадии реконструкции, когда идут технические работы?
Главный момент во всей анимации – это графика. В демо используется всего 4 картинки. Все аккуратненько положено в архив исходников. По мимо этого мы еще будем использовать плагин jquery.easing (в связке с jQuery). Опять же, плагин закинут в архив с исходниками.
Подключаем jQuery и плагин jquery.easing:
1 2 | <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> |
Вызов элементов jQuery и плагина jquery.easing:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |
HTML:
1 2 3 4 5 6 7 8 | <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> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | *{ 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; } |
Мы создали 2 div`a для наших штор, .leftcurtain и .rightcurtain которые четко зафиксированы в нужных нам сторонах, справа и слева. Разные значения width в 50% и 51% и элемент z-index использованы для того, что бы максимально скрыть стык штор по середине. Поигрались немного со значениями и стыка просто не видно.
А фактически ширина и высота картинок обеих штор установлена на уровне 100%. Что при уменьшении создает эффект, как будто шторы сжимаются. Всё натурально.
Контейнер .logo содержит мою надпись Neutron, ты же можешь засунуть туда всё что угодно.
И последний «див» .rope отвечающий за отображение каната, за который нужно дернуть.
Анимация готова. Я растянул всю сцену на весь экран. Но, ты можешь изменить ширину по своему усмотрению, всунув весь html код в новый контейнер, задав ему предварительно необходимую ширину. Надеюсь тебе понравилось. Оставляй комментарии, что бы я знал, нужны ли еще уроки подобных «глобальных» анимаций. 
Опубликовал extezy
Рубрика: CMS