web-dev-qa-db-ja.com

DroplrのようにCSS / jQueryを使用して複数のテキストをフェードイン/フェードアウトする方法は？

CSS3キーフレームが勢いを増し始めたときにウェブサイトでこのタイプのアニメーションを見ましたが、それを見つけることができず、CSSまたはjQueryを使用してそれを複製することもできませんでした。

達成したいことをアニメーション化し、以下に埋め込みました。これは、新しいCSS3キーフレームまたはjQueryの.animate（）を使用してコーディングできると考えています。特徴。知りません。知っていることはすべて試しましたが、すべて無駄です。

これが私が欲しかったGIFアニメーションです：

GIF animation where the text "I am" is static and the Word "invincible" fades out, the Word "awesome" fades in, the Word "awesome" fades back out, and the Word "invincible" fades back in, in an infinite loop.

http://droplr.com/ はホームページで非常によく似たトランジションを使用していますが、いくつかのスライド効果があります。そして、出てくるデータ（単語）は常にランダムです。私はそれがどのように可能であるか知りたいです！

cssanimationphotoshoptransitiongif
15
Amruth Pillai

私はその質問が解決されたことを知っていますが、他の誰かにとって役立つかもしれないと思ったので、xDを共有することにしました

私は自分の解決策を探して時間を費やした後、ここに提示された推測よりもスムーズなものを探していました

ここでは、キーフレームのタイムラインに関して少し考える必要があります。その場合、テキストは、別のキーフレームが既にフェードアニメーションを完了したときにのみ表示されます。

div{
  posititon: relative;
}
.js-nametag{
  position: absolute;
}
.js-nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}
  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>
7
Leandro Lima

[〜＃〜] demo [〜＃〜]

純粋なCSSで可能な解決策！

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}
14
rkpasia

広範なGoogle検索と実験により、自分の質問に答えられるようになりました。

それを行う方法を知りたい方は、私が書いたこのCodePenスニペットをご覧ください。 http://codepen.io/AmruthPillai/pen/axvqB

6
Amruth Pillai

このようなもの：

JSFiddle Demo

[〜＃〜] html [〜＃〜]

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

[〜＃〜] css [〜＃〜]

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

注：これは2ワードの切り替えでのみ機能します。ワードの配列を持ち、それらをループして適用する関数を書く方が良いかもしれません`fadeIn/fadeOutアニメーション。

Edit：ここに複数の単語の解決策があります- https://stackoverflow.com/a/2772278/2470724arrayで各Wordを保存し、それらをループします。

Edit 2：非配列ソリューション： http://jsfiddle.net/kMBMp/ このバージョンはun-ordered listはdisplay:noneその上

5
Nick R

最も手間がかからないアプローチは、おそらくMorphext jQueryプラグインを使用することです。

https://github.com/MrSaints/Morphext

Animate.cssを使用しているため、テキストのアニメーションスタイルを簡単に変更できます。

もう少し強力なものを探している場合（テキストだけでなくアニメーションをIN AND OUTで指定できます）、Morphistと呼ばれるスピンオフがあります。

https://github.com/MrSaints/Morphist

1
Tony He