Блог

Это может быть глупый вопрос, но есть ли способ создать анимацию, подобную мобильному приложению, в браузере. Ссылка на ссылку: http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples

Было бы здорово, если бы что-то можно было построить подобным образом. Я немного разбираюсь в javascript / jquery, но, похоже, это выходит за рамки моих знаний.

Любые технические подробности были бы полезны

Вы можете попробовать использовать famo.us : http://famo.us /

Это новый фреймворк, поэтому есть некоторые проблемы, но у него есть потенциал. Он основан на матричных преобразованиях и может делать действительно удивительные вещи, такие как это: http://www.youtube.com/watch?v=6jg-PlisAFc

Вы можете ознакомиться с другими демонстрациями здесь: http://famo.us/demos /

И здесь есть пример спирали ДНК: http://www.youtube.com/watch?v=JbIL3asjZBs

Надеюсь, это поможет.

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

Потребуется некоторая настройка и настройка для достижения качества связанных анимаций, но это показывает, что анимации CSS3 / jQuery могут быть довольно плавными.

ДЕМОНСТРАЦИЯ

HTML :

 <header></header>
<section>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    ....
</section>
  

CSS :

 body,html{margin:0;}
header{
    height:100px;
    background:#000;
}
article{
    float:left;
    width:50%;
    padding-bottom:16%;
    position:relative;
    color:#fff;
}
article .wrap{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
    background-color: rgba(0, 0, 0, 0.9);

    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
    transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
    display:block;
    width:100%;
    height:auto;
}
footer{
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    background:#000;
}
article:nth-child(odd) .wrap.show{
    width:200%;
    height: 100vh;
    z-index:2;
    -webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
    transition: width 0.2s ease-out, height 0.6s ease-out;
}
  

jQuery :

 $('.wrap').click(function(){
    $('.wrap').not(this).removeClass('show');
    $(this).toggleClass('show');
});