淡入淡出/淡出div中的文本

Question

I would like to know how could I make my div that contains text fade in from bottom to top when scrolling down the page? i will be grateful for your help. Here is my Code:

 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

You need to use a timer function for this. Check this out:

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

This is what I used:

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

Here is the JSFiddle demo

Answer 3

Let me know if this code works with you.

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

});