Fade In on Scroll Down Fade Out on Scroll Up - based on element position in window

Question

I m trying to get a series of elements to fade in on scroll down when they are fully visible in the window  If I keep scrolling down  I do not want them to fade out  but if I scroll up  I do want them to fade out   This is the closest jsfiddle I ve found  http   jsfiddle net tcloninger e5qaD     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  gt  bottom of object                   this  animate   opacity   1   500                                      It does exactly what I want on scroll down  but I also want the elements to fade out if I scroll up past them   I tried this with no luck               if  bottom of window  gt  bottom of object                       this  animate   opacity   1   500                    else                     this  animate   opacity   0   500       Thanks so much for taking the time to look at this

User · Answer

Sorry this is and old thread but some people would still need this I guess,

Note: I achieved this using Animate.css library for animating the fade.

I used your code and just added .hidden class (using bootstrap's hidden class) but you can still just define .hidden { opacity: 0; }

$(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).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});

Another Note: Applying this to containers might cause it to be glitchy.

User · Answer

I tweaked your code a bit and made it more robust  In terms of progressive enhancement it s probaly better to have all the fade-in-out logic in JavaScript  In the example of myfunksyde any user without JavaScript sees nothing because of the opacity  0          window  on  load  function         function fade             var animation height     window  innerHeight     0 25          var ratio   Math round   1   animation height    10000     10000               fade   each function                  var objectTop     this  offset   top              var windowBottom     window  scrollTop       window  innerHeight                 if   objectTop  lt  windowBottom                     if   objectTop  lt  windowBottom - animation height                           this  html   fully visible                           this  css                            transition   opacity 0 1s linear                           opacity  1                                             else                         this  html   fading in out                           this  css                            transition   opacity 0 25s linear                           opacity   windowBottom - objectTop    ratio                                                          else                     this  html   not visible                       this  css   opacity   0                                            fade   css   opacity   0        fade          window  scroll function    fade             See it here  http   jsfiddle net 78xjLnu1 16   Cheers  Martin

User · Answer

The reason your attempt wasn t working  is because the two animations  fade-in and fade-out  were working against each other   Right before an object became visible  it was still invisible and so the animation for fading-out would run  Then  the fraction of a second later when that same object had become visible  the fade-in animation would try to run  but the fade-out was still running  So they would work against each other and you would see nothing   Eventually the object would become visible  most of the time   but it would take a while  And if you would scroll down by using the arrow-button at the button of the scrollbar  the animation would sort of work  because you would scroll using bigger increments  creating less scroll-events     Enough explanation  the solution  JS  CSS  HTML     x000D   x000D    window  on  load  function     x000D      window  scroll function     x000D      var windowBottom     this  scrollTop       this  innerHeight    x000D          fade   each function     x000D           Check the location of each desired element    x000D        var objectBottom     this  offset   top     this  outerHeight    x000D         x000D           If the element is completely within bounds of the window  fade it in    x000D        if  objectBottom  lt  windowBottom      object comes into view  scrolling down  x000D          if    this  css  opacity    0     this  fadeTo 500 1    x000D          else     object goes out of view  scrolling up  x000D          if    this  css  opacity    1     this  fadeTo 500 0    x000D          x000D          x000D       scroll      invoke scroll-handler on page-load x000D      x000D   fade   x000D    margin  50px  x000D    padding  50px  x000D    background-color  lightgreen  x000D    opacity  1  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D     lt div class  fade  gt Fade In 01 lt  div gt  x000D     lt div class  fade  gt Fade In 02 lt  div gt  x000D     lt div class  fade  gt Fade In 03 lt  div gt  x000D     lt div class  fade  gt Fade In 04 lt  div gt  x000D     lt div class  fade  gt Fade In 05 lt  div gt  x000D     lt div class  fade  gt Fade In 06 lt  div gt  x000D     lt div class  fade  gt Fade In 07 lt  div gt  x000D     lt div class  fade  gt Fade In 08 lt  div gt  x000D     lt div class  fade  gt Fade In 09 lt  div gt  x000D     lt div class  fade  gt Fade In 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    fiddle  http   jsfiddle net eLwex993 2     I wrapped the fade-codeline in an if-clause  if    this  css  opacity    0         This makes sure the object is only faded in when the opacity is 0  Same goes for fading out  And this prevents the fade-in and fade-out from working against each other  because now there s ever only one of the two running at one time on an object  I changed  animate   to  fadeTo    It s jQuery s specialized function for opacity  a lot shorter to write and probably lighter than animate  I changed  position   to  offset    This always calculates relative to the body  whereas position is relative to the parent  For your case I believe offset is the way to go  I changed   window  height   to   window  innerHeight    The latter is more reliable in my experience  Directly after the scroll-handler  I invoke that handler once on page-load with   window  scroll     Now you can give all desired objects on the page the  fade class  and objects that should be invisible at page-load  will be faded out immediately  I removed  container from both HTML and CSS  because  at least for this answer  it isn t necessary   I thought maybe you needed the height 2000px because you used  position   instead of  offset    otherwise I don t know  Feel free of course to leave it in your code       UPDATE  If you want opacity values other than 0 and 1  use the following code    x000D   x000D    window  on  load  function     x000D    function fade pageLoad    x000D      var windowBottom     window  scrollTop       window  innerHeight    x000D      var min   0 3  x000D      var max   0 7  x000D      var threshold   0 01  x000D       x000D          fade   each function     x000D           Check the location of each desired element    x000D        var objectBottom     this  offset   top     this  outerHeight    x000D         x000D           If the element is completely within bounds of the window  fade it in    x000D        if  objectBottom  lt  windowBottom      object comes into view  scrolling down  x000D          if    this  css  opacity   lt  min threshold    pageLoad     this  fadeTo 500 max    x000D          else     object goes out of view  scrolling up  x000D          if    this  css  opacity   gt  max-threshold    pageLoad     this  fadeTo 500 min    x000D          x000D          x000D      fade true     fade elements on page-load x000D      window  scroll function   fade false        fade elements on scroll x000D      x000D   fade   x000D    margin  50px  x000D    padding  50px  x000D    background-color  lightgreen  x000D    opacity  1  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D     lt div class  fade  gt Fade In 01 lt  div gt  x000D     lt div class  fade  gt Fade In 02 lt  div gt  x000D     lt div class  fade  gt Fade In 03 lt  div gt  x000D     lt div class  fade  gt Fade In 04 lt  div gt  x000D     lt div class  fade  gt Fade In 05 lt  div gt  x000D     lt div class  fade  gt Fade In 06 lt  div gt  x000D     lt div class  fade  gt Fade In 07 lt  div gt  x000D     lt div class  fade  gt Fade In 08 lt  div gt  x000D     lt div class  fade  gt Fade In 09 lt  div gt  x000D     lt div class  fade  gt Fade In 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    fiddle  http   jsfiddle net eLwex993 3     I added a threshold to the if-clause  see explanation below  I created variables for the threshold and for min max at the start of the function  In the rest of the function these variables are referenced  This way  if you ever want to change the values again  you only have to do it in one place  I also added    pageLoad to the if-clause  This was necessary to make sure all objects are faded to the correct opacity on page-load  pageLoad is a boolean that is send along as an argument when fade   is invoked  I had to put the fade-code inside the extra function fade          in order to be able to send along the pageLoad boolean when the scroll-handler is invoked  I did t see any other way to do this  if anyone else does  please leave a comment    Explanation  The reason the code in your fiddle didn t work  is because the actual opacity values are always a little off from the value you set it to  So if you set the opacity to 0 3  the actual value  in this case  is 0 300000011920929  That s just one of those little bugs you have to learn along the way by trail and error  That s why this if-clause won t work  if    this  css  opacity      0 3          I added a threshold  to take that difference into account     0 3 becomes  lt   0 31   I ve set the threshold to 0 01  this can be changed of course  just as long as the actual opacity will fall between the set value and this threshold    The operators are now changed from    to  lt   and  gt       UPDATE 2   If you want to fade the elements based on their visible percentage  use the following code    x000D   x000D    window  on  load  function     x000D    function fade pageLoad    x000D      var windowTop   window  scrollTop    windowBottom windowTop   window  innerHeight    x000D      var min 0 3  max 0 7  threshold 0 01  x000D       x000D          fade   each function     x000D           Check the location of each desired element    x000D        var objectHeight   this  outerHeight    objectTop   this  offset   top  objectBottom   this  offset   top objectHeight  x000D         x000D           Fade element in out based on its visible percentage    x000D        if  objectTop  lt  windowTop    x000D          if  objectBottom  gt  windowTop     this  fadeTo 0 min   max-min    objectBottom-windowTop  objectHeight      x000D          else if    this  css  opacity   gt  min threshold    pageLoad     this  fadeTo 0 min    x000D          else if  objectBottom  gt  windowBottom    x000D          if  objectTop  lt  windowBottom     this  fadeTo 0 min   max-min    windowBottom-objectTop  objectHeight      x000D          else if    this  css  opacity   gt  min threshold    pageLoad     this  fadeTo 0 min    x000D          else if    this  css  opacity   lt  max-threshold    pageLoad     this  fadeTo 0 max    x000D          x000D      fade true     fade elements on page-load x000D      window  scroll function   fade false        fade elements on scroll x000D      x000D   fade   x000D    margin  50px  x000D    padding  50px  x000D    background-color  lightgreen  x000D    opacity  1  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div gt  x000D     lt div class  fade  gt Fade In 01 lt  div gt  x000D     lt div class  fade  gt Fade In 02 lt  div gt  x000D     lt div class  fade  gt Fade In 03 lt  div gt  x000D     lt div class  fade  gt Fade In 04 lt  div gt  x000D     lt div class  fade  gt Fade In 05 lt  div gt  x000D     lt div class  fade  gt Fade In 06 lt  div gt  x000D     lt div class  fade  gt Fade In 07 lt  div gt  x000D     lt div class  fade  gt Fade In 08 lt  div gt  x000D     lt div class  fade  gt Fade In 09 lt  div gt  x000D     lt div class  fade  gt Fade In 10 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    fiddle  http   jsfiddle net eLwex993 5

User · Answer

I know it s late  but I take the original code and change some stuff to control easily the css  So I made a code with the addClass   and the removeClass    Here the full code   http   jsfiddle net e5qaD 4837           if  bottom of window  gt  bottom of object                  this  addClass  showme                     if  bottom of window  lt  bottom of object                  this  removeClass  showme

[javascript] Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

Examples related to javascript

Examples related to jquery

Examples related to scroll

Examples related to fade