Анимация изображения/DIV + цепочка событий

Я борюсь с анимацией, которая мне нужна для сайта, над которым я работаю, и я надеюсь, что кто-то здесь может помочь. Вот ситуация: клиент хочет, чтобы индексная страница сайта была «хранилищем», которое открывается при нажатии на ссылку «войти», и это должен быть очень специфический дизайн, который я попытаюсь описать как м новый и не может размещать изображения. Экран разделен по вертикали: левая сторона — это DIV-b, а правая — DIV-C. Сверху плавает DIV-A, который содержит круглое изображение или замок хранилища, если хотите.

#DIV-B {
position:relative;
top:0px;
width:50%;
float:left;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-left.jpg);
background-position:right;
overflow:hidden;
}

#DIV-C {
position:relative;
top:0px;
width:50%;
float:right;
height:950px;
z-index:2;
background-image:url(../images/vault-bg-right.jpg);
background-position:left;
overflow:hidden;
}

#DIV-A {
position:relative;
top:150px;
margin:0 auto;
z-index:3;
margin:0 auto;
}

Я уже разбил изображение и правильно выровнял DIV; что должно произойти, так это то, что при нажатии ссылки «ввод» (в DIV-A) изображение в DIV-A (или сам DIV) будет поворачиваться на 180 градусов по часовой стрелке, за которым сразу же скользят DIV-A и DIV B влево, а DIV-C скользит вправо, открывая другой DIV (я думаю, D) под ним.

Я предполагаю, что анимация jQuery и, возможно, цепочка Mootools - это то, что нужно, но, честно говоря, такие вещи для меня немного новы, поэтому я надеюсь, что кто-то сможет помочь мне это изложить. Заранее благодарю за любую помощь!


animation jquery chaining
person user1160842    schedule 20.01.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете написать это вручную, используя анимацию jQuery, но это будет много работы. К счастью, на рынке начинают появляться инструменты для создания анимации HTML5, на которые стоит обратить внимание.

http://labs.adobe.com/technologies/edge/

http://www.sencha.com/products/animator

person Diodeus - James MacFarlane    schedule 20.01.2012
comment
Спасибо Дио, я проверю их как можно скорее! - person user1160842; 20.01.2012

arrow_upward
0
arrow_downward

Я бы использовал комбинацию анимации ключевых кадров jQuery и CSS3... хотя это не будет работать в IE8 и ниже. Я не проверял это, но в теории это должно работать. Дайте мне знать, если он нуждается в модификации.

.open-lock { transform: rotate(180deg) }
.slide-left { left: -1000px }
.slide-right { right: -1000px }
#DIV-A, #DIV-B, #DIV-C, .open-lock { transition: all 3s ease-in-out }

И jQuery

$('#enter-link').click(function(){
    $('#DIV-A').addClass('open-lock');

    setTimeout(function(){
        $('#DIV-B').addClass('slide-left');
        $('#DIV-C').addClass('slide-right');
    },3000)
});

Объяснение: когда вы нажимаете на ссылку с идентификатором "enter-link", в #DIV-A добавляется класс "open-lock", который будет поворачиваться с помощью CSS на 180 градусов. Эта анимация займет 3 секунды. Одновременно была установлена ​​функция setTimeout() на 3 секунды, которая будет выполняться сразу после завершения вращения. Эта функция добавляет классы в DIV B и C, что приводит к изменению их относительного положения, сдвигая их за пределы области просмотра.

Вы можете установить отдельные свойства перехода для разных DIV, если хотите, чтобы их анимация длилась дольше или короче.

Вы также можете добавить префиксы для конкретного браузера, если вам нужна обратная совместимость со старыми версиями Firefox и Safari. -moz-transition: , -webkit-transition: и то же самое для transform.

person HandiworkNYC.com    schedule 20.01.2012
comment
я только что добавил класс «открытый замок», чтобы иметь свойство перехода в CSS. Свойство перехода автоматически анимирует положение и вращение. Вам нужен плагин для вращения с jQuery, так что это гораздо более легкое решение. Кроме того, по моему опыту, анимация CSS более плавная, чем с jQuery. - person HandiworkNYC.com; 20.01.2012
comment
Спасибо J-man, похоже, это именно то, что мне нужно. Я дам ему водоворот и дам вам знать, как это сработало! - person user1160842; 20.01.2012
comment
Снова привет, Джей-мэн, я установил скрипты, и все заработало... вроде. Я нажимаю на ссылку ввода, но фактической анимации нет... после задержки в 3000 мс два задних DIV исчезают (предположительно, слева и справа, как и должно быть, только без анимации скольжения) и передний DIV (A ) остается на месте, не вращаясь и не скользя. Я установил плагин easing, думая, что это может быть проблемой, но пока безуспешно. Любые дальнейшие советы? - person user1160842; 20.01.2012
comment
Мне все еще очень нужно решение этой проблемы, поэтому, если у кого-то есть дополнительная помощь, я буду очень признателен! - person user1160842; 23.01.2012
comment
обратите внимание, что свойство стиля преобразования не поддерживается ни в одном браузере. вы должны использовать свойства, специфичные для браузера, чтобы иметь эту функциональность. Вы можете сделать поиск, чтобы узнать, как это сделать. - person henry bemis; 02.03.2013