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/>中并将一个事件绑定到它们，你可以去：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

解决此问题语句可以做的是取出符合x字体大小的字符串的长度。为了使逻辑更容易，我假设将使用Monospace字体。

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

5 个答案: