带循环的文本动画滑块

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>

希望对你有帮助！