2

Textillate プラグイン(デモはこちら)を使用して、単語/フレーズのグループを循環できるようにしたいと考えています。現在、必要なアニメーションを表示して実行するために 2 つの単語/フレーズ (表示したい最大量) を取得できますが、3 つ目を追加すると、同じ 2 つの単語に 3 つ目の単語/フレーズとして表示されます。三行目。最初の 2 つの単語/フレーズと次の 2 つの単語/フレーズを循環させるにはどうすればよいですか?

HTML:

<div class="phrase-a">
   <p class="tlt">This is the first phrase</p>
</div>

<div class="phrase-b">
   <p class="tlt">This is the second phrase</p>
</div>

<div class="phrase-c">
   <p class="tlt">This is the third phrase</p>
</div>

<div class="phrase-d">
   <p class="tlt">This is the fourth phrase</p>
</div>

JS:

$('.phrase-a .tlt').textillate({
    in: {
        shuffle: false,
        sync: true
    },
    out: {
        effect: 'fadeOutRightBig',
        shuffle: false,
        sync: true
    }
)};
4

1 に答える 1

2

別のレイアウトを使用して、望ましい効果であると私が信じているものを得ることができます。

HTML:

<h1 class="tlt">
    <ul class="texts">
        <li>Some Title</li>   
        <li>Another Title</li>
    </ul>
    <ul class="texts">
        <li>Some Title2</li>   
        <li>Another Title2</li>
    </ul>
</h1>

JS:

$('.texts').textillate({
    minDisplayTime: 1000, 
    in: { effect: 'flipInX', sync: true }, 
    out :{  delay: 3, effect: 'lightSpeedOut', sync: true},
    loop: true
});

ここでデモを参照してください。

于 2013-07-24T20:53:12.030 に答える