jquery像电影字幕一样移动文本

Question

有没有人知道jquery插件或css3技术是另一种简单的移动文本元素的方法，比如从div的顶部到底部移动10个h1？

所以

<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 cycle插件，但是我无法让第二张幻灯片(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  
    });
});

Answer 1

这应该是你想要的.

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%;
}

WORKING JS FIDDLE