CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DoPeT
DoPeT

Reputation: 309

How to fade in DIV's on scroll properly?

currently trying to figure out this.. I'm building a site and its all based on 100% width/height div sections, so I'm not sure if this is why the JS isn't working. However, I'm trying to have this same code sample below fade in each time they scroll to the next section.

<div class="hideme">
    <a href="#" id="display" class="display">
        <div class="navigation arrowdown pa2">
            <span style="color:#fff;">The mission is here</span>
        </div><!--end arrowdown-->
    </a><!--end display-->
</div><!--end hideme-->

I repeated it again like this with the same 

<div class="hideme">
    <a href="#" id="display" class="display">
        <div class="navigation arrowdown pa3">
            <span style="color:#fff;">The solution is here</span>
        </div><!--end arrowdown-->
    </a><!--end display-->
</div><!--end hideme-->

and here is my JS; The second section works as intended but the third does not.

<script type="text/javascript">
  $(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).position().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'},5000);

              }

          }); 

      });

  });
</script>

Here is the live site that I'm working on: http://bit.ly/1eGCShX

Anything that I'm missing, or can I not use the same hideme class cause it's already opacity of 1? Thanks for taking your time to read this! Have a great week.

Upvotes: 2

Views: 734

Answers (3)

Alex
Alex

Reputation: 457

You have used animate inside the loops instead which will never work because all the iteration in javascript are asynchronous.

You can however use setTimeOut with closure for looping, it works like a callback, unless the last one is finished the next one is not started, so will be able to see your animation.

How to write closures

Upvotes: 0

DoPeT
DoPeT

Reputation: 309

My best solution to this was wow.js!

Upvotes: 1

alexK85
alexK85

Reputation: 93

I'm thinking that there is something not being figured out correctly in the bottom comparison. See if you can add a breakpoint to the comparison line, it's in an event listener that is going to fire a lot, but using Chrome DevTools you can "Edit Breakpoint" and give a condition that will activate the breakpoint for you when the condition is met.

For instance: 

bottom_of_object < 520px

Also, do take a look at how requestAnimationFrame can help you with the performance of the site. Right now I'm getting 10-13 FPS(should be as close to 60 as possible) while scrolling the site. This is going to cause a lot of janky behavior from the rendering perspective and leading to a bad user experience.

Another recommendation is to actually hide the element once you have set the opacity to 1. None hidden elements could still be picked up for rendering even-though they are not visible.

Upvotes: 1

Related Questions