jQuery - Fade In/Out on Scroll

[almo136]

I have this piece of code that fades images (with the class .lookbook) in when I scroll down the page. It then fades the image out as I scroll back up the page. This was adapted from some code I found online

<script>

jQuery(window).on("load",function() {
 jQuery(window).scroll(function() {
 var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight();
 jQuery(".lookbook").each(function() {
  /* Check the location of each desired element */
  var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight(); 
  if (objectTop -500 < windowBottom) { //object comes into view (scrolling down)
   if (jQuery(this).hasClass("transparent_class")) {jQuery(this).addClass("visible_class").removeClass("transparent_class");}
  } else { //object goes out of view (scrolling up)
   if (jQuery(this).hasClass("visible_class")) {jQuery(this).addClass("transparent_class").removeClass("visible_class");}
  } 
 });
 }).scroll();
});
</script>

<style>
.transparent_class {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

 /* IE 5-7 */
 filter: alpha(opacity=40);

 /* Netscape */
 -moz-opacity: 0.4;

 /* Safari 1.x */
 -khtml-opacity: 0.4;

 /* Good browsers */
 opacity: 0.4;
 transition: opacity 0.8s ease-in-out;
 -moz-transition: opacity 0.8s ease-in-out;
 -webkit-transition: opacity 0.8s ease-in-out;
} 

.visible_class {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

 /* IE 5-7 */
 filter: alpha(opacity=100);

 /* Netscape */
 -moz-opacity: 1.0;

 /* Safari 1.x */
 -khtml-opacity: 1.0;

 /* Good browsers */
 opacity: 1.0;
 transition: opacity 0.8s ease-in-out;
 -moz-transition: opacity 0.8s ease-in-out;
 -webkit-transition: opacity 0.8s ease-in-out;
} 

</style>

<img class="lookbook transparent_class" src="/1.jpg" /> 
<img class="lookbook transparent_class" src="/2.jpg" /> 
<img class="lookbook transparent_class" src="/3.jpg" /> 
<img class="lookbook transparent_class" src="/4.jpg" /> 
<img class="lookbook transparent_class" src="/5.jpg" /> 
<img class="lookbook transparent_class" src="/6.jpg" /> 
<img class="lookbook transparent_class" src="/7.jpg" /> 
<img class="lookbook transparent_class" src="/8.jpg" /> 

I would like to enhance this so that as I scroll down the image will fade in (this is working) but it will also start to fade out as it disappears out go the top of the screen.

The opposite would then need to work i.e. when I am scrolling up the image fades in as it comes in to the screen before fading out as it leaves the screen.

Hope that makes sense!

[NickMNS]

No it doesn't make sense to me. I'm not sure what you are asking. Also your code, as shown, is confusing. There seems to be an issue with how the comments '//' are being interpreted by the '

' mark up of the post, so it is not clear what is and isn't supposed to be commented out.

Is there a reason why you don't simply use $.fadeIn() and $fadeOut()?
http://api.jquery.com/fadein/
Something like this:

[code]
/*place this at the bottom of your page just above the closing body tag </body>*/
<script>
$(window).scroll(function() {
  var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight();
  var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight(); 
  if (objectTop -500 < windowBottom) { 
    /*object comes into view (scrolling down)*/
    $('.lookup').fadeIn('slow');
  } else {
     /*object goes out of view (scrolling up)*/
     $('.lookup').fadeOut('slow');
  } 
 });
</script>

I have not tested this to be sure it works correctly.
I'm not sure whether this plays nice in all browser, specially when comes to /* netscape */ .
With this you no longer need all the styles you defined.
If you want to fade in and out other elements just add a line in the if statement after the fade in or out as needed.

[almo136]

I had been using fadeTo initially but this wasn't working correctly in Safari so switched to the add/remove class option.

I posted about this here:
[stackoverflow.com...]

You can find a couple of images here which hopefully explain better what I am trying to achieve. The current script only achieves 50% of this.
[evernote.com...]
[evernote.com...]

Also, here is my current code minus the comments:

<script>

jQuery(window).on("load",function() {
 jQuery(window).scroll(function() {
 var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight();
 jQuery(".lookbook").each(function() {
  var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight(); 
  if (objectTop -500 < windowBottom) {
   if (jQuery(this).hasClass("transparent_class")) {jQuery(this).addClass("visible_class").removeClass("transparent_class");}
  } else { 
   if (jQuery(this).hasClass("visible_class")) {jQuery(this).addClass("transparent_class").removeClass("visible_class");}
  } 
 });
 }).scroll();
});
</script>

[NickMNS]

To this just repeat what you have. That is define the top of object and the top of window, and then use if else to set the classes for when the object crosses the top of the window, when it is in the window and then when it crosses the bottom.

Here is jsfiddle: [jsfiddle.net...]

You will need to adjust it to your needs but it should work for you

[almo136]

Amazing, thanks.

[NickMNS]

My pleasure!

[almo136]

I spoke too soon! I am still having some issues.

I can get it to work no problem when using small images like in your example:
[jsfiddle.net...]

The problem is when i switch to using large images it breaks and everything fades as soon as scrolling starts. See here for an example:
[jsfiddle.net...]

I don't know if the issue is because the image is large so it is filling the entire window.

Ideally I would only like the image to start fading out once most of the image has disappeared from view and not as soon as the image hits the top of the window. This may solve the issue as the image wouldn't be filling the entire window at this stage In my original code I got this to work using the objectTop -500 code but I can't seem to get this to work in the updated code.

[NickMNS]

It is working with the large image. It is just that the image is bigger than the viewport so the image either fulfills both conditions, when one image is fully covering the viewport, or when two images are in the view port both images are in the faded state as they are each partially outside of the viewport.

The way to resolve this is by ensuring that the images are responsive and that they scale with the viewport size so that no matter the screen size the user always see at least three images (two partial in view and one fully in view).

[almo136]

Unfortunately the images will always break the viewport. They are large portrait images that take up the full width of the display.

Instead of having the images start to fade as soon as they leave the viewport (i.e. [evernote.com...] could they only start to fade once the majority (e.g. 75%) of the image has left the screen (i.e. [evernote.com...]

For the images appearing at the bottom of the viewport they could start to fade in once the image was partially (e.g. 25%) visible instead of only starting once the entire image was visible.

This would be the preferable way for it to work and would also solve currently caused by large images.

[NickMNS]

could they only start to fade once the majority (e.g. 75%) of the image has left the screen

Sure you could do that, simply add a value in the if statement, as in your first post you showed -500. Then just play with the number making it smaller or larger until you find the desired effect.

Something like this:

 if (objectBottom > windowBottom + 500) 

You can do the same for the the elif statement.

Here is your fiddle updated
[jsfiddle.net...]

[almo136]

That works! However, I have now realised that this isn't ideal (my original code didn't really work either. The problem is that if I used fixed amounts like +500/-500 I can get it to work perfectly on my desktop. The problem is when I check on mobile the effect is lost because the images are so much smaller that the fades happen when they are outside of the viewport.

Is there a way to trigger the fade when a certain % of the image is visible?

Or would I be better trying to achieve this by setting if statements to adjust the +500/-500 when the screen height changes?

[NickMNS]

Simply create a new var for the size of the viewport. You have top and you have bottom so the size it is simply:

var windowSize = windowBottom - windowTop

Then in the if statement take a percentage of windowSize:

 if (objectBottom > windowBottom + (windowSize * 0.50) )

[jsfiddle.net...]