逐行淡出或淡入文本作为滚动

Question

此代码非常适合在用户滚动时淡入/淡出整个段落：

 $(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
      }
   });
});

但是，如果您希望文本逐行淡入/淡出，该怎么办？有没有做过，有人知道吗？

Answer 1

不确定用例是什么，但您可以使用 span 标签分隔每个框并将您的 css 选择器更改为“span”

Answer 2

我的想法与@MikeSchem 相同，但是，如果您首先在每个单词周围添加一个不可见的跨度（在空格处中断），那么您现有的代码（更改为针对跨度）或多或少会起作用，并且仍然会在各种屏幕尺寸上流动。但是，由于您的目标是大量跨度，因此您需要对其进行计时，或者至少使用 window.requestAnimationFrame() 调用它

Answer 3

我在想你可以在顶部和底部添加一个透明的固定图像吗？可能不需要任何javascript。根据你的背景，它可能从简单到困难。

Answer 4

这里的性能并不乐观，但是如果您想将每个字符包装在 <span/> 中并将事件绑定到它们，那么您可以：

/* 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

解决这个问题的方法是取出适合 x 字体大小的行的字符串长度。为了使逻辑更容易，我假设将使用等宽字体。

请查看此 JSFiddle：https://jsfiddle.net/8p5km3so/1/。这不是一个完美的解决方案，但可以改进以获得完美的解决方案。

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>