Fading in divs in html using javascript

Question

In my project I want to fade in divs in html and I am using the following code

$(document).ready(function() {
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
           if( bottom_of_window > bottom_of_object ){
               $(this).animate({'opacity':'1'},500);
           }
       }); 
    });
});

#container {
    height:2000px;    
}

#container div { 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/g/[email protected](jquery.fullPage.min.js+vendors/jquery.easings.min.js+vendors/jquery.slimscroll.min.js)"></script>
<link href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css" rel="stylesheet" />
<div id="container">
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div class="hideme">Fade In</div>
  <div class="hideme">Fade In</div>
  <div class="hideme">Fade In</div>
  <div class="hideme">Fade In</div>
  <div class="hideme">Fade In</div>
</div>

which can be found at this JS Fiddle In the project I also use the javascript code for

$(document).ready(function() {
    $('#fullpage').fullpage();
});

which basically makes the scrolling better, details at https://github.com/alvarotrigo/fullPage.js/

The problem: Because of the full page code the fading in function does not enter the scroll if condition.

Ganesa

Do you have two $(document).ready() in your javascript for the same page? – Callimachus

@Callimachus That doesn't matter. – Isar

Maybe you should use $(this).fadeIn(); – Forecourse

@PraveenKumar You're right, I wasn't sure about it though, but it doesn't. – Callimachus

@AnasSaeed something like this #33327755 – Terrance

Please add the jsfiddle with the fullpage.js plugin in it so we can have a better idea of what your problem is. – Parnas

Answer 1

I think you're looking for something like this JS Fiddle 1

JS:

//initialize
var winHeight = $(window).height(),
  sections = $('.sections'),
  currentSlide = 0;
$('html, body').animate({scrollTop: 0}, 0);

//hide elements not in the view as the page load for the first time
sections.each(function() {
  if ($(this).offset().top > winHeight - 5) {
    $(this).fadeOut(0);
  }
});

//show elements on scroll
$(window).scroll(function(event) {

  // retrieve the window scroll position, and fade in the 2nd next section 
  // that its offset top value is less than the scroll
  scrollPos = $(window).scrollTop();
  if (scrollPos >= currentSlide * winHeight) {
    nextSlide = currentSlide + 2;
    $('#sec-' + nextSlide).fadeIn();

    // as long as current slide is still in range of the number of sections
    // we increase it by one. 
    if (currentSlide <= sections.length) {
      currentSlide++;
    }
  }
});

----------

Update:

Upon a comment by the OP "I want the divs within sections to fade in on scroll not the section div but the ones inside it as there are multiple", all what we need to do is to change this line $(this).fadeOut(0); to this $(this).children().fadeOut(0); and then this line:

$('#sec-' + nextSlide).fadeIn(); to this $('#sec-' + nextSlide).children().fadeIn(1500);

and now, instead of the section itself, we're fading in and out all children of that section.

JS Fiddle 2

Terrance

Thanks for the code but I want the divs within sections to fade in on scroll not the section div but the ones inside it as there are multiple. – Ganesa

@AnasSaeed, it is the same technique but instead of fading out and fading in the section, use .children() so that these effects will be applied to the children of the sections instead, please check the update part of my answer – Terrance

Answer 2

I'm surprised the previous answer got so many upvotes when the scroll event doesn't even get fired when using fullPage.js :D

The solution for your problem is detailed in the fullPage.js FAQs. Which is basically using the fullPage.js option scrollbar:true or autoScrolling:false. This way the scroll event will get fired.

If you still want to use your fading effects when changing from one section to another, the proper solution is making use of fullPage.js callbacks or fullpage.js state classes to fire the animations. That can be done using javascript or plain css 3.

Check an example on how to use css3 animations in combination with the fullpage.js state classes on this video tutorial.

Parnas