Создание замирание в действие для текста (пример прилагается)

Question

жаль короткий пост, но мне нужна помощь создавая эффект, который показывают на этом сайте:

http://joelfilipe.com/

В принципе, я знаю, что вы можете сделать он в jQuery делает «fadeIn», но я не уверен, как подойти к 3D-эффекту на веб-сайте, где он выглядит так, как будто он приземляется на странице, я пытался копаться в коде и просматривать, но был довольно смущен. Любая помощь или совет будут оценены. Благодарю.

Answer 1

Для этого нет необходимости использовать javascript, это можно сделать только в CSS, как показано здесь.

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); 
 

 
body {padding: 0; margin: 0; background-color: #333;} 
 

 
.container {position: fixed; top: 25%; left: 25%;} 
 

 
/* make keyframes that tell the start state and the end state of our object */ 
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
 

 
.fade-in { 
 
    opacity:0; /* make things invisible upon start */ 
 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
 
    -moz-animation:fadeIn ease-in 1; 
 
    animation:fadeIn ease-in 1; 
 

 
    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
 
    -moz-animation-fill-mode:forwards; 
 
    animation-fill-mode:forwards; 
 

 
    -webkit-animation-duration:1s; 
 
    -moz-animation-duration:1s; 
 
    animation-duration:1s; 
 
} 
 

 
.fade-in.one { 
 
    -webkit-animation-delay: 0.7s; 
 
    -moz-animation-delay: 0.7s; 
 
    animation-delay: 0.7s; 
 
} 
 

 
.fade-in.two { 
 
    -webkit-animation-delay: 1.2s; 
 
    -moz-animation-delay:1.2s; 
 
    animation-delay: 1.2s; 
 
} 
 

 
.fade-in.three { 
 
    -webkit-animation-delay: 1.6s; 
 
    -moz-animation-delay: 1.6s; 
 
    animation-delay: 1.6s; 
 
} 
 

 
/*---make a basic box ---*/ 
 
.box{ 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    margin: 10px; 
 
    float: left; 
 
    border: 1px solid #333; 
 
    background: #999; 
 

 
}

<div class="container"> 
 
    <div class="box fade-in one"> 
 
    look at me fade in 
 
    </div> 
 

 
    <div class="box fade-in two"> 
 
    Oh hi! i can fade too! 
 
    </div> 
 

 
    <div class="box fade-in three"> 
 
    Oh hi! i can fade three! 
 
    </div> 
 
</div>

Или вы можете использовать JavaScript для активации CSS анимации. Вы можете увидеть пример что-то подобное здесь http://www.virginholidays.co.uk/wonderlist

Answer 2

Вы можете использовать wow effects это полная библиотека для создания CSS анимации

вы можете использовать данные вау-импульсная данных вау задержки скачиваться CSS и JS файлы и вы будете в пути в кратчайшие сроки.