#javascript #jquery #css #css-animations
#javascript #jquery #css #css-анимация
Вопрос:
Это может быть глупый вопрос, но есть ли способ создать анимацию, подобную мобильному приложению, в браузере. Ссылка на ссылку: http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples
Было бы здорово, если бы что-то можно было построить подобным образом. Я немного разбираюсь в javascript / jquery, но, похоже, это выходит за рамки моих знаний.
Любые технические подробности были бы полезны
Комментарии:
1. Вы пытаетесь создать приложение HTML5 для телефона? Если это так, я сообщу вам, что я уже пробовал это, и анимации работают не так гладко, как в native.
2. Также вы можете посмотреть другие примеры по той же ссылке, которую вы предоставили. Внимательно ознакомьтесь со всем, что есть в разделе анимации.
3. Я пытаюсь создать веб-сайт с этими анимациями
Ответ №1:
Вы можете попробовать использовать famo.us : http://famo.us /
Это новый фреймворк, поэтому есть некоторые проблемы, но у него есть потенциал. Он основан на матричных преобразованиях и может делать действительно удивительные вещи, такие как это: http://www.youtube.com/watch?v=6jg-PlisAFc
Вы можете ознакомиться с другими демонстрациями здесь: http://famo.us/demos /
И здесь есть пример спирали ДНК: http://www.youtube.com/watch?v=JbIL3asjZBs
Надеюсь, это поможет.
Комментарии:
1. Это выглядит великолепно, могу ли я сделать это в браузере?
2. Хорошо, он построен на javascipt, поэтому я предполагаю, что он может быть реализован в brower
Ответ №2:
Вот небольшой пример того, что вы можете сделать с помощью 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');
});
Комментарии:
1. спасибо за демонстрацию, это определенно требует много настроек для каждой анимации.
2. @user3486430 да, это только начало, качественная анимация всегда требует много работы… Но я хотел подчеркнуть, что вы можете создавать их с помощью простых инструментов и вам не нужны тонны плагинов.