jquery - jquery 像电影学分一样移动文本

Question

有谁知道 jquery 插件或 css3 技术是移动文本元素的另一种简单方法，比如 div 内从 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 循环插件，但我无法在第一张幻灯片完成动画之前启动第二张幻灯片（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%;
}

工作 JS 小提琴