Question

有一个很酷的效果，页面底部似乎淡出位于以下链接

https://css-tricks.com/examples/FadeOutBottom/

有人可以告诉我如何将该工具合并到我的网站中。

我是css的新手，不知道从哪里开始 - 这就是为什么我要找一个现成的工具。

非常感谢您的帮助

干杯

卡尔顿

Answer 1

这是一个使用名为'bottom-fade.png'的PNG文件的技巧，它是从顶部的完全透明到最后的不透明白色的渐变。现在背景是白色的，它给人一种淡出文字的感觉。图像放在一个始终向前设置的图层（检查z-index）和固定位置（意味着它始终位于页面底部）。

Answer 2

经过大量的思考，我设法使用Animate.css库实现了淡入淡出的动画效果

$(document).ready(function() {

/* Every time the window is scrolled ... */

$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();


    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){

        $(this).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});

我希望这可以帮助其他有类似问题的人

淡出页面底部的文本

2 个答案: