image cross fade transition
TRANSCRIPT
![Page 1: Image Cross Fade Transition](https://reader030.vdocuments.us/reader030/viewer/2022020804/577cd72a1a28ab9e789e3c66/html5/thumbnails/1.jpg)
7/27/2019 Image Cross Fade Transition
http://slidepdf.com/reader/full/image-cross-fade-transition 1/5
Image Cross Fade Transition
http://www.rafaeldesigner.com.br/blog/?Uk1db6fU
demonstração
http://www.rafaeldesigner.com.br/blog/?Uk1db6fU
In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse
rolls over, and the slowly fade back once the mouse has left.
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I
know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer - either in
CSS or with the simplest of JavaScript:
$(function () {$('img.swap').hover(function () {this.src = 'images/sad.jpg';
}, function () {this.src = 'images/happy.jpg';
});});
Today’s challenge is the rollover transition!
Watch the complete screencast (alternative flash version)
(QuickTime version is approx. 20Mb, flash version is streaming)
How to Approach the Problem
There are a few different ways which problem can be solved (and I’d love to hear alternative methods
via the comments).
Here are the ways I’m going to go through:
1. Two Image
2. Single Image
3. Pure CSS
The key to all of these techniques is how the rendered markup (i.e. what the browser finally sees) is
arranged: all of which are very similar.
Essentially, the end image for the transition must sit absolutely in the same position as the startingimage.
![Page 2: Image Cross Fade Transition](https://reader030.vdocuments.us/reader030/viewer/2022020804/577cd72a1a28ab9e789e3c66/html5/thumbnails/2.jpg)
7/27/2019 Image Cross Fade Transition
http://slidepdf.com/reader/full/image-cross-fade-transition 2/5
![Page 3: Image Cross Fade Transition](https://reader030.vdocuments.us/reader030/viewer/2022020804/577cd72a1a28ab9e789e3c66/html5/thumbnails/3.jpg)
7/27/2019 Image Cross Fade Transition
http://slidepdf.com/reader/full/image-cross-fade-transition 3/5
// ...take it's current opacity back up to 1fade.stop().fadeTo(250, 1);
} else {// fade in quicklyfade.fadeIn(250);
}}, function () {// on hovering out, fade the element outvar fade = $('> div', this);
if (fade.is(':animated')) {fade.stop().fadeTo(3000, 0);} else {// fade away slowlyfade.fadeOut(3000);
}});
});
Single Image Technique
This takes the two image technique further. I like the idea that we should let the JavaScript add the sugar
to the markup - in that we should really only want an image tag, and using some method to know whatimage we want to fade to.
This technique allows us to insert the image in the markup as we would if there were no transition effect,
and the image can be inline, rather being positioned absolutely.
We are going to use the background-image CSS property to specify the target image to fade to.
View the working example and the source
HTML
<img class="fade"src="images/who.jpg"style="background: url(images/who_ro.jpg);" />
CSS
Other than the inline background image - none is required. You can also apply the background-image
using classes if you like.
If we wanted to absolutely position the image, or float: right for instance, the best way to do this (if
we want to keep the transition), would be to wrap it in a div and style that element.
jQuery
Using jQuery, we execute the following tasks:
1. Wrap the image in a span
2. Insert a new image, whose source is the background-image of our start image
3. Position the new image so that sits directly behind the starting image
4. Bind hover event to start the effect
// create our transition as a plugin$.fn.crossfade = function () {return this.each(function () {
![Page 4: Image Cross Fade Transition](https://reader030.vdocuments.us/reader030/viewer/2022020804/577cd72a1a28ab9e789e3c66/html5/thumbnails/4.jpg)
7/27/2019 Image Cross Fade Transition
http://slidepdf.com/reader/full/image-cross-fade-transition 4/5
// cache the copy of jQuery(this) - the start imagevar $$ = $(this);
// get the target from the backgroundImage + regexpvar target = $$.css('backgroundImage').replace(/^url|[()]/g, ''));
// nice long chain: wrap img element in span$$.wrap('<span style="position: relative;"></span>')// change selector to parent - i.e. newly created span
.parent()// prepend a new image inside the span
.prepend('<img>')// change the selector to the newly created image.find(':first-child')// set the image to the target.attr('src', target);
// position the original image$$.css({'position' : 'absolute','left' : 0,// this.offsetTop aligns the image correctly inside the span'top' : this.offsetTop
});
// note: the above CSS change requires different handling for Opera and Safari,// see the full plugin for this.
// similar effect as single image technique, except using .animate// which will handle the fading up from the right opacity for us$$.hover(function () {$$.stop().animate({
opacity: 0}, 250);
}, function () {$$.stop().animate({
opacity: 1}, 3000);
});});
};
// Not only when the DOM is ready, but when the images have finished loading,// important, but subtle difference to $(document).ready();$(window).bind('load', function () {// run the cross fade plugin against selector$('img.fade').crossfade();
});
Pure CSS Technique
If I’m honest, this final technique is a bit cheeky - but still valid. It uses CSS animations only (currently)
available in Safari 3 (and WebKit).
However, this is a great example of how to the leverage the CSS using an iPhone (over using
JavaScript).
The HTML is the same rendered HTML from the single image technique - but it requires zero
JavaScript.
View the working example and the source (to see the effect, view using Safari 3).
![Page 5: Image Cross Fade Transition](https://reader030.vdocuments.us/reader030/viewer/2022020804/577cd72a1a28ab9e789e3c66/html5/thumbnails/5.jpg)
7/27/2019 Image Cross Fade Transition
http://slidepdf.com/reader/full/image-cross-fade-transition 5/5
HTML<span style="position: relative;">
<img src="images/who_ro.jpg" /><imgstyle="position: absolute; left: 0px;"src="images/who.jpg" class="fade" />
</span>
CSS
Although this is only supported in Safari 3, the roll over still works in Firefox (and could work in IE7 -
though not IE6 because :hover only works on anchors) - because it’s changing the image’s opacity on
:hover.
img.fade {opacity: 1;-webkit-transition: opacity 1s linear;
}
img.fade:hover {
opacity: 0;}
Taking it Further
I’ve taken the single image technique further in to a complete plugin. It’s designed to allows us to pass
options to control the type of bind, delays, callbacks and tests before running the animation.
Download the full plugin
You can see the plugin in action in this simple memory game I put together quickly.
It pulls the latest photos from flickr , shuffles them, and then sets your memory skills to work.
It’s obviously just a quick prototype - and I’m not sure what happens when you go beyond level 5!
Enjoy.