Fadein/Fadeout div內的文字

Question

我想知道如何讓包含文字的div在向下滾動頁面時從下往上褪色？我會很感激你的幫助。這是我的代碼：

var $text = $('.textBlock'); 
 
$(window).on('scroll', function(event, element) { 
 
    $text.each(function(event, element) { 
 
    if ($(this).visible()) { 
 
     $(this).children('p').stop().fadeIn(); 
 
    } else { 
 
     $(this).siblings('.textBlock p').stop().fadeOut(); 
 
    } 
 
    }); 
 
});

.textBlock { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 118px; 
 
    float: left; 
 
    display: block; 
 
} 
 
.textBlock p { 
 
    font-size: 24px; 
 
    padding: 30px 0; 
 
    line-height: 25px; 
 
    letter-spacing: 0.1em; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="blockOne" class="textBlock"> 
 
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div> 
 
<div id="blockTwo" class="textBlock"> 
 
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div> 
 
<div id="blockThree" class="textBlock"> 
 
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div>

Answer 1

你需要使用定時器功能這一點。檢查了這一點：

$(function() { 
 
    $(".textBlock").hide(); 
 
    $("#blockOne").show(); 
 
    $(window).scroll(function() { 
 
    numTextBlocks = $(".textBlock").length; 
 
    $(".textBlock:visible").fadeOut(400, function() { 
 
     console.log(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")"); 
 
     $(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")").fadeIn(400); 
 
    }); 
 
    }); 
 
});

html, body { 
 
    height: 150%; 
 
} 
 
.textBlock { 
 
    position: fixed; 
 
    text-align: center; 
 
    width: 100%; 
 
    height: 118px; 
 
} 
 
.textBlock p { 
 
    font-size: 24px; 
 
    padding: 30px 0; 
 
    line-height: 25px; 
 
    letter-spacing: 0.1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="blockOne" class="textBlock"> 
 
    <p>One Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div> 
 
<div id="blockTwo" class="textBlock"> 
 
    <p>Two Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div> 
 
<div id="blockThree" class="textBlock"> 
 
    <p>Three Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p> 
 
</div>

Answer 2

這是我用什麼：

$(document).on("mousewheel", function() { 
    $(".textBlock:not(:visible)").first().fadeIn("slow") 
}); 

Here is the JSFiddle demo

Answer 3

讓我知道如果這個代碼的工作與你。

Fiddle

$(window).on("load",function() { 
function fade() { 
    $('.fade').each(function() { 
     /* Check the location of each desired element */ 
     var objectBottom = $(this).offset().top + $(this).outerHeight(); 
     var windowBottom = $(window).scrollTop() + $(window).innerHeight(); 

     /* If the object is completely visible in the window, fade it in */ 
     if (objectBottom < windowBottom) { //object comes into view (scrolling down) 
      if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);} 
     } else { //object goes out of view (scrolling up) 
      if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);} 
     } 
    }); 
} 
fade(); //Fade in completely visible elements during page-load 
$(window).scroll(function() {fade();}); //Fade in elements during scroll 

}）;