2016-05-06 5 views
-3

私は自分のプロジェクトでこのようなものを実装するチャンスがあるので、私はしばらく前にウェブサイト上で本当にクールなアニメーションを見ました。フロントエンドの作業で経験を積んだ人が、これが何であるか教えてくれて、正しい方向に向けるかもしれませんか?ここでは、この面ではCSS/JSのアニメーションテキスト?

:reflektive.comあなたはどのようにテキストの変更やスクロールでの並べ替え、テキスト「人材開発」の下で、スライダーに表示されます任意のヒントについて

感謝を!

+0

あなたには、いくつかのreference..reflektive.comを読む[尋ねる] –

+0

開かれていない提供することができます。 – j08691

+0

Googleの「CSSアニメーション」とあなたはbazillionチュートリアルがそれを学ぶことができますしてください – C14L

答えて

0

リンクが見つかりました。これはあなたが期待しているアニメーションですか?

http://codepen.io/rusjames/pen/uAFhE

@keyframes type{ 
    from { width: 0; } 
} 

@keyframes type2{ 
    0%{width: 0;} 
    50%{width: 0;} 
    100%{ width: 100; } 
} 


p{ 
    width: 30em; 
    animation: type 4s steps(60, end); 
} 
+0

いいえ、残念ながらそうではありません。もう少し掘り下げた後、私はそれがアニメーションのためのCSS、つまりJQueryではないことがわかります。標準JQueryライブラリは機能していないので、サードパーティのライブラリでなければなりません。ありがとう、私はあなたの入力を感謝します。 – lpangm03

1

thisライブラリを使用してください。あなたの質問で言及したサイトで使用されているものと同じライブラリ。

<script src="jquery.js"></script> // jquery library 
<script src="typed.js"></script> // typed.js library 
<script> 
    $(function(){ 
     $(".element").typed({ 
      strings: ["First sentence.", "Second sentence."], 
      typeSpeed: 0 
     }); 
    }); 
</script> 


<span class="element"></span> 
関連する問題