带循环的文本动画滑块

Question

我想创建一个文本循环，就像一个垂直的滑块。所以我在某人的投资组合中看到了这种影响，真的不记得何时。我制作了一个gif图像，预览了它看起来会慢得多：

<p>This is some example</p> <h1>Text</h1> <h1>Text 2</h1> <h1>Text 3</h1>

在不使用插件和滑块的情况下，我可以通过哪种方式为其设置动画。感谢。

Answer 1

这是一个可能需要一些额外工作的例子，但希望能让你开始。

http://jsfiddle.net/YbDq3/1/

的jQuery

$(document).ready(function() {
    $('h1').css({top: 40, opacity: 0});
    scrollWord();
});

function scrollWord() {
    $('h1').last().animate({top: 7, opacity: 1}, 200, 'linear', function() {
        $(this).animate({top: -20, opacity: 0}, 200, 'linear', function() {
            $(this).css({top: 40, opacity: 0});
            $('p').after($(this));
            scrollWord();
        });
    });
}

CSS

h1 {font-size: inherit; padding: 0; display: inline-block; font-weight: normal; margin: 0 0 0 5px; position: absolute;}
p {margin: 0; padding: 0; display: inline-block;}

HTML

<p>This is some example</p><h1>Text</h1><h1>Text2</h1><h1>Text3</h1>

希望它有所帮助！