CSS text fade gradient effect

Question

Я использую -webkit-mask-image: -webkit-gradient для создания эффекта градиента текста.

Рассмотрим это: http://codepen.io/apopa116/pen/xOpjEz

Используя только CSS, как я могу удалить маску градиента, когда я достигаю в нижней части DIV?

Answer 1

Что бы я сделал, это добавить 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) [Кредит: Андрей Кость]

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') 
    } 
})