CSS文本渐变渐变效果

-1

我使用-webkit-mask-image: -webkit-gradient来创建文本渐变渐变效果。CSS文本渐变渐变效果

考虑一下：http://codepen.io/apopa116/pen/xOpjEz

通过只使用CSS，我怎么能去掉渐变面具，当我到达div的底部？

2016-07-19 apopa

当你说“当我到达div的底部”时，你是在谈论滚动吗？因为我不相信CSS具有视图窗口在文档内部的任何概念，所以这可能是不可能的。（只用CSS即可，用JS就可以实现） – DBS

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。虽然您提供了[**链接到示例或网站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果链接变得无效，那么你的问题对于其他具有相同问题的未来SO用户将没有任何价值。 –

我要做的是添加一些JQuery（您首先必须添加一行来导入Jquery框架），该功能可以检测窗口一直滚动到页面底部的时间，以及如果它发生变化该-webkit-掩码图像属性：

通过添加此JS，你应该能够得到你想要的东西：

jQuery(function($) { 
    $('.box').on('scroll', function() { 
     if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
      $(".box").css("-webkit-mask-image", "initial"); 
     }else{ 
      $(".box").css("-webkit-mask-image", ""); 
     } 
    }) 
});

Codepen Demo

标准JS溶液的当量（不需要JQuery导入）[信誉：Andrew Bone]

var boxSelector = document.querySelector('.box'); 

boxSelector.addEventListener("scroll", function() { 
    if (boxSelector.scrollTop >= (boxSelector.scrollHeight - boxSelector.offsetHeight)) { 
    boxSelector.classList.remove('gradient') 
    } else { 
    boxSelector.classList.add('gradient') 
    } 
})

来源

2016-07-19 08:35:04 btrballin

就我个人而言，我会切换CSS类而不是JS中的样式，但这主要是个人偏好。 – DBS

当它一直滚动到底部时，淡入淡出效果停止，但一旦再次向上滚动时不会继续，因此我的解决方案稍微简化了一些。 – btrballin

我不完全确定为什么你想要导入jquery（减慢加载时间）只是为了做到这一点？在标准的JS中很容易做到https://jsfiddle.net/b0390hhx/ –

CSS文本渐变渐变效果

回答

相关问题