Создаём прикольную анимацию на jQuery

 Сегодня мы создадим прикольную анимацию на jQuery.Мы будем загружать простое текстовое изображение "HELLO".Но оно будет загружаться не как обычно,а "криво".Вы можете посмотреть demo

 Для начала откройте Dreamweawer или другой редактор и создайте html файл.

И вставьте туда следующий HTML код:

<div class="logo">
<img class="frame" src="/frame.png" alt="">
<img class="ani-bg" src="/ani-bg.png" alt="">
</div>

Как вы могли заметить,мы разместили два изображения внутри <div class="logo">
CSS

 

body{
background:#29b0b1;
}
.logo{
width:500px;
height:120px;
float:left;
overflow:hidden;
position:relative;
}
.ani-bg{
position:absolute;
top:-500px;
left:0;
}
.frame{
position:absolute;
top:0;
left:0;
z-index:1!important;
}

Как вы могли заметить,класс стиля .frame имеет атрибут z-index:1-это означает,что он находится над другим изображением.<div class="logo"> имеет свойство overflow:hidden, это означает, что изображение ani-bg.png не будет отображаться за пределами <div class="logo">.

Javascript/jQuery

$(document).ready(function(){
$(".ani-bg").animate({
marginTop: "420px"
}, 2500 );
});

Перед тем как использовать этот код,вам необходимо скачать и добавить библиотеку JQuery в свой HTML-файл.Скачать можно здесь. Я использовал версию 1.3.2 для этого урока, но вы можете использовать все версии JQuery.

Источник: webinby.ru

 

 

Версия для печатиВерсия для печати

Рубрики: 

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 0
Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!

Комментарии

Спасибо большое. Очень нужный урок.))