Scrolling Black & White to Color Images

In my last post, I showed you how to make background images go from black and white to color, or vise versa, even using a Parallax effect.

This time, I am going to use a different technique, utilizing the jQuery.BlackAndWhite plugin along with some custom code to fade regular inline black and white images out when it is in view. Unlike the last post it works in all browsers because we aren’t relying on CSS background transitions.

View The Demo

Step 1: Include jQuery and jQuery.BlackAndWhite

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/jquery.BlackAndWhite.js"></script>

Step 2: The Markup and CSS

Your image needs to be contained. Give it a class, as we will use this class in our CSS and jQuery.

<div class="bw">
     <img src="images/desert2.jpg">
</div>
.bw {
	position: relative;
}

Step 3: Custom jQuery

Make sure to change your selector to whatever you named the container of the image.

function animationToggle() {
	var wWidth = $(window).width();
	var wHeight = $(window).height();

	var scrollTopPos = $(document).scrollTop();
	var screenMiddle = scrollTopPos + (wHeight / 2);
	
	// Add the 'animate' class when the .bw div is in view.
	$('.bw').each(function() {
		var divheight = $(this).height();
		if (($(this).offset().top < screenMiddle - 100) && (($(this).offset().top + divheight - 100) >= scrollTopPos)) {
			$(this).addClass("animate");
		} else {
			$(this).removeClass("animate");
		}
	});
}

$(document).scroll(function() {
	animationToggle();
	// Fade out the B&W image when the 'animate' class is visible
	$('.bw.animate canvas, .bw.animate .BWfade').fadeOut('slow');
});

Let’s break this one down… The animationToggle function at the top gives any div in view a class of animate. We then fade the canvas element that is created from the black and white jQuery script when its container has the animate class. Pretty simple huh?

View The Demo

What do you think of this effect? Got another way of doing something similar? Share it!

About The Author

Owner of Anything Graphic. Website designer / developer.
I live in Albuquerque, NM with my partner and two dogs. I love to travel, listen to music, sing to myself, and sit in front of a computer learning what I can. You can follow me on , Twitter, Facebook, Dribble, and LinkedIn.

Speak Your Mind

*