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文本漸變漸變效果

回答

相關問題