fade out or fade in text line by line as scroll

Question

This code works great for fading in/fading out whole paragraphs as the user scrolls:

 $(window).scroll(function () {
   $('[id^="box"]').each(function () { // <---loop the divs id starts with #box 
      if (($(this).offset().top - $(window).scrollTop()) < 20) { //<---mark the $(this).offset().top of current object
          $(this).stop().fadeTo(100, 0); //<----fadeOut the current obj
      } else {
          $(this).stop().fadeTo('fast', 1); //<----fadeIn the current obj
      }
   });
});

But what if you want the text to fade in/fade out line by line? Has this ever been done, does anyone know?

Answer 1

Not sure what the use case is, but you could separate each box with span tags and change your css selector to 'span'

Answer 2

I was thinking along the same lines as @MikeSchem, however, if you start by adding an invisible span around every word (break at whitespace) then your existing code, altered to target the spans will more-or-less work, and will still flow on various screen sizes. However, as you'd be targeting a huge number of spans, you'd want to time-slug it, or at least call it with window.requestAnimationFrame()

Answer 3

I was thinking you could add a transparent fixed image to the top and bottom? Might not need any javascript. Depending on your background it could be anywhere from simple to difficult.

Answer 4

Not promising performance here, but if you wanted to wrap each character in a <span/> and bind an event to them, here you go:

/* Wrap Each Char in <span/> */
$('[id^="box"]').each(function() {
  let box = $(this);
  let chars = box.text().split('');
  box.empty();
  $.each(chars, function(index, value) {
    box.append($('<span/>').text(value));
  });
});

/* Set Scroll Timer */
var scrollTimer = null;

/* Bind Event to Window Scroll */
$(window).on('scroll', function() {
  /* Clear Timeout if Set */
  if(scrollTimer) { clearTimeout(scrollTimer); }
  
  /* Set Timeout */
  scrollTimer = setTimeout(function() {
    $('[id^="box"] > span').each(function() {
      if (($(this).offset().top - $(window).scrollTop()) < 20) {
        $(this).stop().fadeTo(100, 0);
      } else {
        $(this).stop().fadeTo('fast', 1);
      }
    });
  }, 0);
}).scroll(); // Init Scroll

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="box1">Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you. Your text will go here. We need information from you to replace this content. Please send us some information so we can update the text for you.</p>

Answer 5

What could be done to tackle this problem statement is to take out length of string that fits in a line with x font size. To make the logic easier, I am assuming the Monospace fonts will be used.

Please have a look to this JSFiddle : https://jsfiddle.net/8p5km3so/1/ . This is not a perfect solution but could be improved to make a perfect solution.

var wordsPerLine = 11;

var originalContent = $("#test").text();

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    scroll = Math.floor(scroll/10);//To Control Scroll Speed
    var hilightStart = wordsPerLine * scroll;
    var hilightEnd = wordsPerLine * scroll + wordsPerLine;
    var stringBeforeHilight = originalContent.substring(0,hilightStart);
    var stringToBeHilighted = originalContent.substring(hilightStart,hilightEnd);
    var stringPostHilighted = originalContent.substring(hilightEnd,originalContent.length);
    //console.log(stringBeforeHilight);
    //console.log(stringToBeHilighted);
    //console.log(stringPostHilighted);
    
    $('#test').html(stringBeforeHilight+"<span class='hilight'>"+stringToBeHilighted+"</span>"+stringPostHilighted);

});

p {
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    word-break: break-all;
}
body{
  width:100px;
}
.hilight{
  color:red;
  background-color:black;
  text-transform: uppercase;
  word-break: break-all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>