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

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

2 голосов
/ 20 января 2012

Я борюсь с анимацией, которая мне нужна для сайта, над которым я работаю, и я надеюсь, что кто-то здесь может помочь.Вот ситуация: клиент хочет, чтобы индексная страница сайта была «хранилищем», которое открывается при нажатии на ссылку «ввод», и это должен быть очень специфический дизайн, который я постараюсь описать, как я ».Я новичок и не могу публиковать изображения.Экран разделен по вертикали, левая сторона - 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;
}

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

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

Ответы [ 2 ]

0 голосов
/ 20 января 2012

Я бы использовал комбинацию анимации ключевых кадров 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», класс «open-lock»"добавлен в # DIV-A, который будет вращаться с CSS до 180 градусов.Эта анимация займет 3 секунды.Одновременно была установлена ​​функция setTimeout () на 3 секунды, которая будет выполняться сразу после завершения вращения.Эта функция добавляет классы в DIVs B и C, что приведет к изменению их относительного расположения, выдвигая их из области просмотра.

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

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

0 голосов
/ 20 января 2012

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

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

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

...