Главная » CMS » Анимация открытия занавеса с помощью jQuery

Анимация открытия занавеса с помощью jQuery

Всем привет. Решил сегодня опубликовать первый урок, такой себе «глобальной» анимации с помощью jQuery. Ведь все не заканчивается только различными эффектами для меню, ссылок и всплывающими окнами. С помощью jQuery довольно легко можно заставить двигаться различные предметы так, как нужно нам, в итоге получив потрясную анимацию не хуже по качеству чем тот-же «флеш». Кстати, я лично считаю данный формат не перспективным (соглашусь с производителями ОС для смартфонов и еще много с кем) и перестал изучать Adobe Flash, взамен начав мучать 3Ds Max и Adobe After Effects. Конечно сравнивать этот софт нет смысла, перед ними стоят абсолютно разные задачи, но радости от последних я получаю намного больше.

Так, вернемся к нашей анимации. Посмотри демо. Правда отличная анимация? Как насчет использовать сие как заглушку для отключенного сайта или сайта в стадии реконструкции, когда идут технические работы?

Главный момент во всей анимации — это графика. В демо используется всего 4 картинки. Все аккуратненько положено в архив исходников. По мимо этого мы еще будем использовать плагин jquery.easing (в связке с jQuery). Опять же, плагин закинут в архив с исходниками.

Подключаем и плагин :


Вызов элементов jQuery и плагина jquery.easing:

HTML:


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;
}

Мы создали 2 div`a для наших штор, .leftcurtain и .rightcurtain которые четко зафиксированы в нужных нам сторонах, справа и слева. Разные значения width в 50% и 51% и элемент z-index использованы для того, что бы максимально скрыть стык штор по середине. Поигрались немного со значениями и стыка просто не видно.

А фактически ширина и высота картинок обеих штор установлена на уровне 100%. Что при уменьшении создает эффект, как будто шторы сжимаются. Всё натурально.

Контейнер .logo содержит мою надпись Neutron, ты же можешь засунуть туда всё что угодно.

И последний «див» .rope отвечающий за отображение каната, за который нужно дернуть.

Анимация готова. Я растянул всю сцену на весь экран. Но, ты можешь изменить ширину по своему усмотрению, всунув весь html код в новый контейнер, задав ему предварительно необходимую ширину. Надеюсь тебе понравилось. Оставляй комментарии, что бы я знал, нужны ли еще уроки подобных «глобальных» анимаций. ;)

World’s Largest Skateboard Disaster

На правах рекламы!
Удобно когда под рукой всегда есть . Я не так давно подключился к спутниковому ТВ, и разобраться что, когда и по какому каналу идет (а у меня их более 300 русскоязычных) крайне сложно. По этому я смотрю только футбол и дискавери.

Запись опубликована в рубрике CMS с метками , , . Добавьте в закладки постоянную ссылку.

2 комментария: Анимация открытия занавеса с помощью jQuery

  1. говорит:

    Черт возьми, вот именно таких уроков и надо!))

  2. Екатерина говорит:

    А не могли бы подсказать, как сделать такой переход от страницы к страницы. чтобы на слово "Дерни" открывался занавес и переход к другой странице

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>