1

jquery プラグインまたは css3 テクニックで、テキスト要素を移動する別の簡単な方法を知っている人はいますか?

そう

<div class="container">
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
    <h1>Content</h1>
...
</div>

h1が連続してスライドし、div領域が映画のクレジットのように下にスライドするh1で満たされるようにします。

jquery サイクル プラグインを試しましたが、最初のスライドがアニメーションを終了する前に 2 番目のスライド (h1) を開始できません。

コードは次のとおりです。

$('.container').cycle({ 
    fx:      'scrollDown', 
    sync: 1, 
    timeout: 1000,
    speed: 6000,
    continuous: 1,
    cleartypeNoBg: true 
});

また、次のようなことを試しました：

$('.container').cycle({ 
    fx:      'custom', 
    sync: 1, 
    cssBefore: {  
    top:  0, 
    display: 'block' 
    }, 
    animIn:  { 
        top: 0 
    }, 
    animOut: {  
        top: 332 
    }, 
    cssAfter: {   
        display: 'none' 
    }, 
    delay: -1000  
    });
});
4

1 に答える 1

3

これはあなたが望むことをするはずです....

HTML

<div id="container">
    <div id="fancy_h1_wrap">
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
        <h1>Content</h1>
    </div>
</div>

jquery

function fun(){
    $('#fancy_h1_wrap').css('top', '');
    $('#fancy_h1_wrap').animate({top:"-100%"}, 5000, fun);

}

fun();

CSS

#container 
{
    overflow:hidden;

}

#fancy_h1_wrap
{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
}

ワーキングJSフィドル

于 2013-07-25T17:41:43.183 に答える