Сегодня мы создадим прикольную анимацию на 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