ein Fade-in-Effekt für Text erstellen (Beispiel enthielt)

Question

traurig über die kurzen Pfosten, aber ich brauche etwas Hilfe, die Wirkung zu schaffen, die auf dieser Website zeigen:

http://joelfilipe.com/

Im Grunde weiß ich, dass Sie tun können, es in jQuery macht eine "FadeIn", aber ich bin mir nicht sicher, wie man den 3D-Effekt auf der Website, wo es aussieht, wie es auf der Seite landet, versuchte ich in den Code zu graben und zu sehen, aber war ziemlich verwirrt. Jede Hilfe oder Beratung wäre willkommen. Vielen Dank.

Answer 1

Es ist nicht notwendig Javascript zu verwenden, es kann wie hier gezeigt alleine in CSS erfolgen.

@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>

Oder Sie Javascript, eine CSS-Animation aktivieren benutzen konnten. Sie können ein Beispiel für etwas ähnliches hier sehen http://www.virginholidays.co.uk/wonderlist

Answer 2

Sie können wow effects verwenden ist dies eine vollständige Bibliothek CSS Animations

Sie die CSS und JS-Dateien Dauer Daten-wow-data-wow-delay-Download erstellen können und du wirst in kürzester Zeit unterwegs sein.