Question

我正在寻找在“Crafted for creativity”部分下实现此页面上使用的文本效果，其中文本在滚动时滑动并淡入淡出，我该怎么做？查看此页面：http://www.fiftythree.com/pencil

还希望在移动设备上完成这项工作。

谢谢！

Answer 1

在scroll()上获取窗口scrollTop()值，然后与每个元素top position()进行比较。如果scrollTop()大于某个元素top position，则应用动画/渐变。

如果您有这样的标记。

<div>
    <section>First</section>
    <section>Second</section>
    <section>Third</section>
    <section>Fourth</section>
    <section>Fifth</section>
</div>

这是解决方案：

$(window).scroll(function(){
var st = $(this).scrollTop(),
    winH = $(this).height(),
    /* you can set this add, 
    depends on where you want the animation to start
    for example if the section height is 100 and you set add of 50,
    that means if 50% of the section is revealed 
    on the bottom of viewport animate text
    */
    add = 150;

$('section').each(function(){
    var pos = $(this).position().top;

    if(st + winH >= pos + add){
        $(this).stop().animate({opacity:1, marginTop:10},'fast');
    }else{
        $(this).stop().animate({opacity:0, marginTop:0},'fast');
    }
});
});

请参阅 jsfiddle

在滚动上实现文本的飞行/淡入淡出

1 个答案: