Rewind|Forward • Animation Feature
What is it, what's for?
What if we redefined the way we share our experience with tools more ergonomic, efficient, innovative and attractive to our readers? Let's talk about tutorials for example, rather than listing a set of images one below the other for each step of photo processing, wouldn't be great to compare them overlapping, making the appreciation of most subtle adjustments obvious to the user while improving their reading pleasure? Rewind|Forward • Animation Feature, is my answer to this “linear” way to look at items online. I originally developed this tool to allow my readers to be able to very quickly and with high efficiency, see and animate manually an images list. The function is particularly simple to use: just move the mouse cursor over the image and the function is activated immediately, thus allowing, while you ride the cursor, to animate the list, image by image. This allows me to support beginners and amateurs in a logic of learning photography in a opened way, as I did it for my Before|After • Comparison Feature. If I have until then only pointed out the domain of photography, all the below examples will illustrate how the function is versatile. Folks, increase the value of your content by offering them a simple but real technical structure.
Why choosing it?
  • Simple tool, efficient and fun;
  • Free;
  • Display/Animate just anything you want;
  • Ideal for tutorials and training courses;
  • For everyone, photographers, illustrators, 3D artists, web designers, etc.;
  • For personal & pro. projects;
  • Say goodbye to basics post layouts with pictures placed one below each other, avoiding any easy comparison;
  • Impress you audience by using a new Web layout concept;
  • Cross-platform and soon for iOS!;
  • Class names are prefixed to avoid/limit any name conflicts with others functions.
As previously, I give free access to the source code of this tool so that more people wanting to share their work based on this principle, can easily do so.

License

Creative Commons License
“Rewind|Forward • Animation Feature” by Édouard Puginier is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Permissions beyond the scope of this license may be available at https://tazintosh.com/en/contact/.
Demos and ideas

Rewind|Forward • Animation Feature offers a wide range of uses. Whether you are a photographer, illustrator, 3D artist, web designer, trainer, etc., it will help you to showcase your own creations, training or tutorials, without ever losing sight of efficiency and simplicity for the user. The following examples will be hopefully varied enough to fully appreciate the field of application offered. Note that in order to illustrate the installation steps explained on this article, the source code of each demo is available just below each of them.

Little Metal Plane - frame#01Little Metal Plane - frame#02Little Metal Plane - frame#03Little Metal Plane - frame#04Little Metal Plane - frame#05Little Metal Plane - frame#06Little Metal Plane - frame#07Little Metal Plane - frame#08Little Metal Plane - frame#09Little Metal Plane - frame#10Little Metal Plane - frame#11Little Metal Plane - frame#12Little Metal Plane - frame#13Little Metal Plane - frame#14Little Metal Plane - frame#15Little Metal Plane - frame#16Little Metal Plane - frame#17Little Metal Plane - frame#18Little Metal Plane - frame#19Little Metal Plane - frame#20Little Metal Plane - frame#21Little Metal Plane - frame#22Little Metal Plane - frame#23Little Metal Plane - frame#24Little Metal Plane - frame#25Little Metal Plane - frame#26Little Metal Plane - frame#27Little Metal Plane - frame#28Little Metal Plane - frame#29Little Metal Plane - frame#30Little Metal Plane - frame31
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-01.jpg" alt="Little Metal Plane - frame#01" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-02.jpg" alt="Little Metal Plane - frame#02" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-03.jpg" alt="Little Metal Plane - frame#03" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-04.jpg" alt="Little Metal Plane - frame#04" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-05.jpg" alt="Little Metal Plane - frame#05" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-06.jpg" alt="Little Metal Plane - frame#06" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-07.jpg" alt="Little Metal Plane - frame#07" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-08.jpg" alt="Little Metal Plane - frame#08" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-09.jpg" alt="Little Metal Plane - frame#09" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-10.jpg" alt="Little Metal Plane - frame#10" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-11.jpg" alt="Little Metal Plane - frame#11" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-12.jpg" alt="Little Metal Plane - frame#12" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-13.jpg" alt="Little Metal Plane - frame#13" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-14.jpg" alt="Little Metal Plane - frame#14" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-15.jpg" alt="Little Metal Plane - frame#15" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-16.jpg" alt="Little Metal Plane - frame#16" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-17.jpg" alt="Little Metal Plane - frame#17" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-18.jpg" alt="Little Metal Plane - frame#18" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-19.jpg" alt="Little Metal Plane - frame#19" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-20.jpg" alt="Little Metal Plane - frame#20" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-21.jpg" alt="Little Metal Plane - frame#21" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-22.jpg" alt="Little Metal Plane - frame#22" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-23.jpg" alt="Little Metal Plane - frame#23" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-24.jpg" alt="Little Metal Plane - frame#24" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-25.jpg" alt="Little Metal Plane - frame#25" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-26.jpg" alt="Little Metal Plane - frame#26" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-27.jpg" alt="Little Metal Plane - frame#27" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-28.jpg" alt="Little Metal Plane - frame#28" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-29.jpg" alt="Little Metal Plane - frame#29" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-30.jpg" alt="Little Metal Plane - frame#30" />
	<img class="_RF_item" src="pathToYourPicture/3D-LMP_Clay-31.jpg" alt="Little Metal Plane - frame#31" />
</div>
Sketch - frame#01Sketch - frame#02Sketch - frame#03Sketch - frame#04Sketch - frame#05Sketch - frame#06Sketch - frame#07Sketch - frame#08Sketch - frame#09Sketch - frame#10Sketch - frame#11Sketch - frame#12
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-01.jpg" alt="Sketch - frame#01" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-02.jpg" alt="Sketch - frame#02" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-03.jpg" alt="Sketch - frame#03" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-04.jpg" alt="Sketch - frame#04" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-05.jpg" alt="Sketch - frame#05" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/2D-Sketch-06.jpg" alt="Sketch - frame#06" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-07.jpg" alt="Sketch - frame#07" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-08.jpg" alt="Sketch - frame#08" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-09.jpg" alt="Sketch - frame#09" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-10.jpg" alt="Sketch - frame#10" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-11.jpg" alt="Sketch - frame#11" />
	<img class="_RF_item" src="pathToYourPicture/2D-Sketch-12.jpg" alt="Sketch - frame#12" />
</div>

Thank you Clémentine!

Special thanks to
Clémentine Martinez, illustrator,
for this original creation.

Photo originale (RAW)RecadrageBalance des blancsExposition  0,5evAjustement des bleusMise en valeur des teintes chaudesExposition du cielExposition de l&#039;avion, r&eacute;sultat final
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-01.jpg" alt="Original picture (RAW)" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-02.jpg" alt="Crop" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-03.jpg" alt="White balance" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-04.jpg" alt="Exposure +0,5ev" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-05.jpg" alt="Blue adjustment" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-06.jpg" alt="Enhancement of warm tones" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_1100-07.jpg" alt="Sky exposure" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/photo-5DMkII-IMG_1100-08.jpg" alt="Aircraft exposure, final result" />
</div>
Impact d&#039;une vague &asymp; 30m de haut #1Impact d&#039;une vague &asymp; 30m de haut #2Impact d&#039;une vague &asymp; 30m de haut #3Impact d&#039;une vague &asymp; 30m de haut #4Impact d&#039;une vague &asymp; 30m de haut #5Impact d&#039;une vague &asymp; 30m de haut #6
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7887.jpg" alt="Wave impact ≈ 30m high #1" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7888.jpg" alt="Wave impact ≈ 30m high #2" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7889.jpg" alt="Wave impact ≈ 30m high #3" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7890.jpg" alt="Wave impact ≈ 30m high #4" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7891.jpg" alt="Wave impact ≈ 30m high #5" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/photo-5DMkII-IMG_7892.jpg" alt="Wave impact ≈ 30m high #6" />
</div>
Fichier de base transparentRendu 3D - Passe RGBRendu 3D - Passe masque d&#039;objetMasque d&#039;objet appliqu&eacute; en canal alphaPhoto d&#039;arri&egrave;re-planCompositing Arri&egrave;re-plan/VoitureRendu 3D - Passe d&#039;ombreCompositing Arri&egrave;re-plan/OmbreR&eacute;sultat final
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-01.jpg" alt="Base file, transparent" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-02.jpg" alt="3D render - RGB pass" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-03.jpg" alt="3D render - Object buffer" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-04.jpg" alt="Object buffer applied as al" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-05.jpg" alt="Background picture" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-06.jpg" alt="Compositing background/car" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-07.jpg" alt="3D render - Shadow pass" />
	<img class="_RF_item" src="pathToYourPicture/2D3D-CompositingLMC-08.jpg" alt="Compositing background/shadow" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/2D3D-CompositingLMC-09.jpg" alt="Final result" />
</div>
Photo d&#039;origine - Fort de JouxAjout - SolAjout - Relief et rempartsAjout - Ville et relief d&#039;arri&egrave;re-planAjout - CielAjout - Lion de BelfortAjustement - Teintes/luminosit&eacute; d&#039;arri&egrave;re-planAjustement - Teinte remparts
Well, this is a 2005 matte painting! Please by kind ^^
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-01.jpg" alt="Original picture - Fort de Joux" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-02.jpg" alt="Addition - Ground" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-03.jpg" alt="Addition - Relief and ramparts" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-04.jpg" alt="Addition - City and background relief" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-05.jpg" alt="Addition - Sky" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-06.jpg" alt="Addition - Lion de Belfort" />
	<img class="_RF_item" src="pathToYourPicture/2D-MattePaintingFort-07.jpg" alt="Ajustment - Background hue/luminosity" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/2D-MattePaintingFort-08.jpg" alt="Ajustment - Ramparts tones" />
</div>
IMG_7200IMG_7201IMG_7202IMG_7203IMG_7204IMG_7205IMG_7206IMG_7207IMG_7208IMG_7209IMG_7210IMG_7211IMG_7212IMG_7213IMG_7214IMG_7215IMG_7216IMG_7217IMG_7218IMG_7219IMG_7220IMG_7221IMG_7222IMG_7223IMG_7224IMG_7225
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7200.jpg" alt="IMG_7200" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7201.jpg" alt="IMG_7201" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7202.jpg" alt="IMG_7202" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7203.jpg" alt="IMG_7203" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7204.jpg" alt="IMG_7204" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7205.jpg" alt="IMG_7205" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7206.jpg" alt="IMG_7206" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7207.jpg" alt="IMG_7207" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7208.jpg" alt="IMG_7208" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7209.jpg" alt="IMG_7209" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7210.jpg" alt="IMG_7210" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7211.jpg" alt="IMG_7211" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/photo-5DMkII-IMG_7212.jpg" alt="IMG_7212" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7213.jpg" alt="IMG_7213" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7214.jpg" alt="IMG_7214" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7215.jpg" alt="IMG_7215" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7216.jpg" alt="IMG_7216" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7217.jpg" alt="IMG_7217" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7218.jpg" alt="IMG_7218" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7219.jpg" alt="IMG_7219" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7220.jpg" alt="IMG_7220" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7221.jpg" alt="IMG_7221" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7222.jpg" alt="IMG_7222" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7223.jpg" alt="IMG_7223" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7224.jpg" alt="IMG_7224" />
	<img class="_RF_item" src="pathToYourPicture/photo-5DMkII-IMG_7225.jpg" alt="IMG_7225" />
</div>
Mise au point&nbsp;: troncMise au point&nbsp;: t&ecirc;teMise au point&nbsp;: transition t&ecirc;te/dos #1Mise au point&nbsp;: transition t&ecirc;te/dos #2Mise au point&nbsp;: transition t&ecirc;te/dos #3Mise au point&nbsp;: transition t&ecirc;te/dos #4Mise au point&nbsp;: dosMise au point&nbsp;: ailesR&eacute;sultat de l&#039;empilement
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3989.jpg" alt="Focus on: trunk" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3990.jpg" alt="Focus on: head" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3991.jpg" alt="Focus on: transition head/back #1" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3992.jpg" alt="Focus on: transition head/back #2" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3993.jpg" alt="Focus on: transition head/back #3" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3994.jpg" alt="Focus on: transition head/back #4" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3995.jpg" alt="Focus on: back" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3996.jpg" alt="Focus on: wings" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/photo-7D-IMG_focus_3989-3996.jpg" alt="Focus Stacking result" />
</div>
Travers&eacute;e de kangourou&hellip;&hellip; d&#039;avionVoie ferr&eacute;e #1Voie ferr&eacute;e #2Zone inondable #1Zone inondable #2Prudence d&eacute;passementDanger incendiePr&eacute;sence de grues brolga
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2306.jpg" alt="Kangaroo crossing…" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2309.jpg" alt="Plane crossing…" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2290.jpg" alt="Railway #1" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2289.jpg" alt="Railway #2" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2395.jpg" alt="Floodway #1" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2311.jpg" alt="Floodway #2" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2314.jpg" alt="Overtaking warning" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_3177.jpg" alt="Fire risk" />
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_2445.jpg" alt="Brolgas crossing" />
</div>
F-16C Fighting Falcon - Image bruteF-16C Fighting Falcon - Image trait&eacute;e
<div class="_RF_area">
	<img class="_RF_item" src="pathToYourPicture/photo-7D-IMG_1093-RAW.jpg" alt="F-16C Fighting Falcon - RAW picture" />
	<img class="_RF_item _RF_visible" src="pathToYourPicture/photo-7D-IMG_1093.jpg" alt="F-16C Fighting Falcon - Post-processed picture" />
</div>
Three steps install
The tool is composed as follows: the HTML code basically constituted of the images to animate, included in a container; a CSS stylesheet; the javascript code to handle user interaction.
<div class="_RF_area">
	<img class="_RF_item" src="pathToTheAfterPicture" alt="Some description text" />
	<img class="_RF_item" src="pathToTheAfterPicture" alt="Some description text" />
	<img class="_RF_item" src="pathToTheAfterPicture" alt="Some description text" />
	<img class="_RF_item _RF_visible" src="pathToTheAfterPicture" alt="Some description text" />
	<img class="_RF_item" src="pathToTheAfterPicture" alt="Some description text" />
	<img class="_RF_item" src="pathToTheAfterPicture" alt="Some description text" />
	[…]
</div>
._RF_area {
	cursor: ew-resize;
	position: relative;
	display: block;
	margin: auto;
}

._RF_area ._RF_item {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
}

._RF_area ._RF_visible {
	display: block !important;
}

._RF_area ._RF_item._RF_visible {
	position: relative;
}

._RF_area ._RF_caption {
	bottom: 15px;
	position: absolute;
	text-align: center;
	left: 0px;
	right: 0px;
	display: none;
}

._RF_area ._RF_caption span {
	color: #eaeaea;
	background-color: rgba(0,0,0,0.8);
	font-size: 10px;
	padding: 5px;
	font-family: "Lucida Grande";
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	display: inline-block;
}
/* ============================================================ */
/* Rewind|Forward • Animation Feature v1.0 — © Édouard Puginier — https://tazintosh.com */
/* Special thanks to Frédéric Grasset — frederic.grasset[at]me[dot]com */
/* Under Creative Common license Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) */
/* ============================================================ */
(function($){
	function setupAnimation(animationElement){
		var items = $(animationElement).children("._RF_item");
		var itemsLength = items.length;
		var firstItem = items.first();
		var itemClass = "_RF_visible";
		if (!items.hasClass(itemClass)){ // Set class if not exist
			firstItem.addClass(itemClass);
		}
		var firstItemWidth = firstItem.outerWidth();
		$(animationElement).width(firstItemWidth);
		var animationStepWidth = firstItemWidth / itemsLength;
		var defaultStep = 0;
		for (var i = 0; i < itemsLength; i++){
			if ($(items[i]).hasClass(itemClass)){
				defaultStep = i;
				break;
			}
		};
		var lastStep = defaultStep;
		$(animationElement).append('<div class="_RF_caption"><span></span></div>');
		var caption = $(animationElement).children("._RF_caption");
		var captionText = caption.children("span");
		var captionClass = itemClass;

		function animate(step){
			if (lastStep != step){
				if (lastStep >= 0){
					$(items[lastStep]).removeClass(itemClass); // Hide previous img
				}
				$(items[step]).addClass(itemClass); // Show next img
				// Display alt attribute as img caption
				var itemAlt = $(items[step]).attr("alt");
				caption.addClass(captionClass);
				captionText.html(itemAlt);
				if (itemAlt == ""){
					caption.removeClass(captionClass);
				}
			}
			lastStep = step;
		};

		function animationStart(event){
			var offset = $(animationElement).offset().left;
			var curX = event.pageX - offset;
			var step = Math.floor(curX / animationStepWidth);
			animate(step);
		};

		function animationStop(event){
			//animate(defaultStep);
			caption.removeClass(captionClass);
		};

		$(animationElement).mousemove(animationStart);
		$(animationElement).mouseleave(animationStop);
	};

	$(document).ready(function(){
		// Detecting available animations
		$("._RF_area").each(function(animationElementIndex, animationElement){
			setupAnimation(animationElement);
		});
	});
})(jQuery);

Versions history

Version 1.0 - 2012-06-20
Initial public release of Rewind|Forward • Animation Feature.
They're already using it!
If you too, are using this tool, let me know and I'll update this list with your name, website and twitter nickname.
Christophe Bailleux
Photographe
Site web | @cb_photographie
You, yes you, photographer mate!
Photographer
Website | @yourTwitterAccount
You too, Miss illustrator!
Illustrator
Website | @yourTwitterAccount
Polygons lover
3D Artist
Website | @twitterAccount
Web Designer
Web Designer
Website | @twitterAccount
Trainer
Trainer
Website | @twitterAccount
Me ^^
Photographer - CGArtist
Website | @tazintosh

Participer

Want a feature?
Use the form following or post a comment at the bottom of this article to share your ideas/needs. If you post a comment, users can vote for your idea using the + and - symbols associated. Also, if you make changes to the code, thank you for sharing them by posting a comment explaining the work done, or by sending me an email.
What else?

This symbolic coffee would be a true expression of your appreciation of this work.

Participate

Maximum upload size: 268.44MB