Hello everyone who can explain and help with my problem, I will be very grateful. In General, the idea is that when scrolling, when a certain part of the text becomes visible, it becomes black, and when it is not visible, it is transparent, because it does not work just when scrolling, that is, I scroll and nothing happens, only when I click again, the part that became visible is painted over.
$('.way').on('click', function(){
$('.content_side').load('way.html');
function isVisible(elem){
let coords = elem.getBoundingClientRect();
let windowHeight = document.documentElement.clientHeight;
let topVisible = coords.top > 0 && coords.top < windowHeight;
let bottomVisible = coords.bottom > 0 && coords.bottom < windowHeight;
return topVisible || bottomVisible;
}
function wrap(elem){
let wrapper = document.createElement('span');
wrapper.prepend(elem);
elementStyle.prepend(wrapper);
}
let elementStyle = document.querySelector('.way_specialText');
let text = Array.from(elementStyle.textContent.split(''));
function finalFill(){
elementStyle.innerHTML = '';
text.forEach(function(item){
wrap(item);
});
}
finalFill();
function showHidden(){
let arraySpan = elementStyle.querySelectorAll('span');
for(let uno of arraySpan){
if(isVisible(uno)){
uno.style.color = "black";
}
}
}
showHidden()
window.addEventListener('scroll',showHidden)
}).way_specialText{
width: 50%;
float: right;
font-size: 3em;
margin-top: 110%;
font-weight: bold;
color: transparent;
-webkit-text-stroke:1px black;
transition: 0.5s all linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="way">
<div class="way_specialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat dicta ex, blanditiis culpa nobis amet tempore, quo quis quae neque expedita architecto dignissimos similique, enim esse odit corporis eius.
</div>
</div>