On this page we will provide technical information on how to use our icons in web and application development.
Crossfade Effects between V-Collection and M-Collection Icons
On our M-Collection and V-Collection overview page we give a demonstration on great looking crossfade animations between the V-Collection and M-Collection icons. Following we will show you how these effects can be easily integrated in your web design.
Simple Crossfade on Mouse Hover Using jQuery
First we will show you a simple crossfade animation when the mouse moves over an image. Our approach uses the popular jQuery JavaScript library.
The markup we use consists of two images wrapped in a single DIV tag.
<div class="crossfade">
<img src="imgs/example_bottom_1.png" />
<img src="imgs/example_top_1.png" />
</div>
To overlap the two images we position the div as relative and both images absolute to the div.
.crossfade {
position: relative;
width: <image width>px;
height: <image height>px;
}
.crossfade > * {
position: absolute;
top: 0;
left: 0;
}
For the crossfade effect we use jQuery fadeTo() method to fade out/in the top image on mouse hover.
$(document).ready(function() {
$('.crossfade').hover(
function() { $(this).children().last().stop().fadeTo(1000, 0); },
function() { $(this).children().last().stop().fadeTo(1000, 1); }
);
});
Simple Crossfade Example on Mouse Hover:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Simple Crossfade on Image Hover</title>
<script src="/_scripts/jquery/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.crossfade').hover(
function() { $(this).children().last().stop().fadeTo(1000, 0); },
function() { $(this).children().last().stop().fadeTo(1000, 1); }
);
});
</script>
<style>
.crossfade {
position: relative;
width: 128px;
height: 128px;
margin: 10px;
float: left;
}
.crossfade > * {
position: absolute;
top: 0;
left: 0;
background: #B5CEDE;
}
</style>
</head>
<body>
<div class="crossfade">
<img src="imgs/example_bottom_1.png" />
<img src="imgs/example_top_1.png" />
</div>
<div class="crossfade">
<img src="imgs/example_bottom_2.png" />
<img src="imgs/example_top_2.png" />
</div>
<div class="crossfade">
<img src="imgs/example_bottom_3.png" />
<img src="imgs/example_top_3.png" />
</div>
<div class="crossfade">
<img src="imgs/example_bottom_4.png" />
<img src="imgs/example_top_4.png" />
</div>
</body>
</html>
More control with the ImageSwitch plugin
If you want more control to switch between two images without writing all functionality yourself, you can use our free jQuery ImageSwitch plugin which offers:
Write less code then you would using just jQuery. Full feature API for all basic image switch operations. Different image switch effects (right now: fade and slide, but likely more to follow). Lots of customizing options and callbacks (See the full API Documentation here ). Switch between multiple overlapping images in a sequence. Queue image switch animations just like queuing jQuery animations.
The Plugin makes it easy to write animations like the one you can see on the start page of www.iconexperience.com . Following we will give you a brief introduction and examples of what is possible with the plugin.
For downloads, a small tutorial and the full API Documentation of the plugin please refer to the projects Github page:
https://github.com/iconexperience/imageswitch
ImageSwitch Plugin Example 1:
This example will do the same crossfade on mouse hover like the example using just jQuery above using the ImageSwitch plugin. By default the plugin assumes the same markup we used above (two images wrapped in a div).
The script to include just consists of a single line.
$(selector).imageSwitch('hover');
<!DOCTYPE html>
<!--
A basic example of a crossfade animation between
two images when the mouse hovers over the images.
-->
<html>
<head>
<meta charset='utf-8'/>
<script src="/_scripts/jquery/jquery.js" type="text/javascript"></script>
<script src="/_scripts/jquery.imageswitch.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.image_switch').imageSwitch('hover');
});
</script>
<style>
.image_switch {
position: relative;
width: 128px;
height: 128px;
margin: 10px;
float: left;
}
.image_switch > * {
position: absolute;
top: 0;
left: 0;
background: #b5cede;
}
</style>
</head>
<body>
<div class="image_switch">
<img src="imgs/example_bottom_1.png" />
<img src="imgs/example_top_1.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_2.png" />
<img src="imgs/example_top_2.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_3.png" />
<img src="imgs/example_top_3.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_4.png" />
<img src="imgs/example_top_4.png" />
</div>
</body>
</html>
ImageSwitch Plugin Example 2 (Basic Actions):
This example shows all basic actions for switching between images.
$(selector).imageSwitch('bottom'); // switch to bottom image
$(selector).imageSwitch('top'); // switch to top image
$(selector).imageSwitch('toggle'); // toggle top and bottom
$(selector).imageSwitch('blink'); // toggle from one image to the other and back
$(selector).imageSwitch('bottom', { sequence: true }); // switch each image to bottom in a sequence order
$(selector).imageSwitch('top', { sequence: true }); // switch each image to top in a sequence order
$(selector).imageSwitch('top', { sequence: true }); // toggle each image in a sequence order
$(selector).imageSwitch('top', { sequence: true }); // blink each image in a sequence order
$(selector).imageSwitch('stop'); // stop animation
<!DOCTYPE html>
<!--
A basic example of the basic ImageSwitch animations.
-->
<html>
<head>
<meta charset='utf-8'/>
<script src="/_scripts/jquery/jquery.js" type="text/javascript"></script>
<script src="/_scripts/jquery.imageswitch.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var imageSwitchElems = $('.image_switch');
$('#bottom').click(function() {
// animate to bottom image
out('bottom [queued]');
imageSwitchElems.imageSwitch('bottom', {
onStart: function() { out('bottom [started]'); },
onFinish: function() { out('bottom [finished]'); }
});
});
$('#top').click(function() {
// animate to top image
out('top [queued]');
imageSwitchElems.imageSwitch('top', {
onStart: function() { out('top [started]'); },
onFinish: function() { out('top [finished]'); }
});
});
$('#toggle').click(function() {
// animate a toggle action (switch bottom and top image)
out('toggle [queued]');
imageSwitchElems.imageSwitch('toggle', {
onStart: function() { out('toggle [started]'); },
onFinish: function() { out('toggle [finished]'); }
});
});
$('#blink').click(function() {
// animate a blink action (toggle from one image to the other and back)
out('blink [queued]');
imageSwitchElems.imageSwitch('blink', {
onStart: function() { out('blink [started]'); },
onFinish: function() { out('blink [finished]'); }
});
});
$('#bottom_sequence').click(function() {
// animate to bottom in a sequence
out('bottom sequence [queued]');
imageSwitchElems.imageSwitch('bottom', {
sequence: true,
onStart: function() { out('bottom sequence [started]'); },
onFinish: function() { out('bottom sequence [finished]'); }
});
});
$('#top_sequence').click(function() {
// animate to top in a sequence
out('bottom [queued]');
imageSwitchElems.imageSwitch('top', {
sequence: true,
onStart: function() { out('top sequence [started]'); },
onFinish: function() { out('top sequence [finished]'); }
});
});
$('#toggle_sequence').click(function() {
// animate toggle in a sequence
out('toggle sequence [queued]');
imageSwitchElems.imageSwitch('toggle', {
sequence: true,
onStart: function() { out('toggle sequence [started]'); },
onFinish: function() { out('toggle sequence [finished]'); }
});
});
$('#blink_sequence').click(function() {
// animate blink in a sequence
out('blink sequence [queued]');
imageSwitchElems.imageSwitch('blink', {
sequence: true,
onStart: function() { out('blink sequence [started]'); },
onFinish: function() { out('blink sequence [finished]'); }
});
});
$('#stop').click(function() {
// stop all running animations
out('stop');
imageSwitchElems.imageSwitch('stop', { sequence: true });
});
var lineNum = 1;
function out(text) {
$('#output').val(lineNum++ + ': ' + text + "\n" + $('#output').val());
}
$('#output').val('');
});
</script>
<style>
.image_switch {
position: relative;
width: 128px;
height: 128px;
margin: 10px;
float: left;
}
.image_switch > * {
position: absolute;
top: 0;
left: 0;
background: #b5cede;
}
</style>
</head>
<body>
<div class="image_switch">
<img src="imgs/example_bottom_1.png" />
<img src="imgs/example_top_1.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_2.png" />
<img src="imgs/example_top_2.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_3.png" />
<img src="imgs/example_top_3.png" />
</div>
<div class="image_switch">
<img src="imgs/example_bottom_4.png" />
<img src="imgs/example_top_4.png" />
</div>
<div style="clear: both;"></div>
<div>
<div>
Apply Effect:
</div>
<div style="padding: 5px 0;">
<button id="bottom">bottom</button>
<button id="top">top</button>
<button id="toggle">toggle</button>
<button id="blink">blink</button>
<button id="bottom_sequence">bottom (sequence)</button>
<button id="top_sequence">top (sequence)</button>
<button id="toggle_sequence">toggle (sequence)</button>
<button id="blink_sequence">blink (sequence)</button>
<button id="stop">stop</button>
</div>
</div>
<textarea id="output" style="width: 100%; height: 200px;"></textarea>
</body>
</html>
ImageSwitch Plugin Example 3 (Queuing with Different Options):
This example shows queuing the animations with different customizing options.
$(selector)
.imageSwitch('bottom')
.imageSwitch('top', { transformation: 'slide' })
.imageSwitch('toggle', { duration: 5000, easing: 'easeInOutQuad' })
.fadeOut(2000)
.fadeIn(2000)
.imageSwitch('blink', {
switch1Options: { duration: 500 },
switch2Options: { duration: 2000 },
easing: 'easeInQuad'
})
.imageSwitch('init', { transformation: 'slide', duration: 1000 })
.imageSwitch('blink', { sequence: true })
.imageSwitch('toggle', {
sequence: { order: 'reverse', interval: 2000 }
})
.imageSwitch('init', { transformation: 'fade', duration: 2000 });
<!DOCTYPE html>
<!--
An example of queuing multiple animations with different options.
-->
<html>
<head>
<meta charset='utf-8'/>
<script src="/_scripts/jquery/jquery.js" type="text/javascript"></script>
<script src="/_scripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="/_scripts/jquery.imageswitch.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var imageSwitchElems = $('.image_switch');
// first init
imageSwitchElems.imageSwitch({
duration: 2000
});
$('#start').click(function() {
function animationQueue() {
imageSwitchElems
// to bottom
.imageSwitch('bottom', {
onStart: outFunc("bottom - (no options)")
})
// to top
.imageSwitch('top', {
transformation: 'slide',
onStart: outFunc("top - options: { transformation: 'slide' }")
})
// toggle
.imageSwitch('toggle', {
duration: 5000,
easing: 'easeInOutQuad', // needs jquery-ui
onStart: outFunc("toggle - options: { duration: 5000; easing: 'easeInOutExpo' }"),
onFinish: outFunc('fadeOut (jQuery animation)')
})
// jQuery fadeOut
.fadeOut(2000, outFunc('fadeIn (jQuery animation)'))
// jQuery fadeIn
.fadeIn(2000)
// blink
.imageSwitch('blink', {
switch1Options: {
duration: 500,
onStart: outFunc("blink switch 1 - options: { duration: 500 }")
},
switch2Options: {
duration: 2000,
onStart: outFunc("blink switch 2 - options: { duration: 2000 }")
},
easing: 'easeInQuad', // needs jquery-ui
onStart: outFunc("blink")
})
// init
.imageSwitch('init', {
transformation: 'slide',
duration: 1000,
onStart: outFunc("init - options: { transformation: 'slide', duration: 1000 }")
})
// blink with sequence
.imageSwitch('blink', {
sequence: true,
onStart: outFunc("blink - options: { sequence: true }")
})
// toggle with sequence and sequence options
.imageSwitch('toggle', {
sequence: {
order: 'reverse',
interval: 2000,
onStartSequenceStep: outFunc("start sequence step")
},
onStart: outFunc("toggle - options: { sequence: { order: 'reverse', interval: 2000 } }")
})
// init
.imageSwitch('init', {
transformation: 'fade',
duration: 2000,
onStart: outFunc("init - options: { transformation: 'fade', duration: 2000 }")
})
;
};
animationQueue();
});
$('#stop').click(function() {
out('stop');
imageSwitchElems.stop(true);
imageSwitchElems.imageSwitch('stop');
});
var lineNum = 1;
function out(text) {
$('#output').val(lineNum++ + ': ' + text + "\n" + $('#output').val());
}
function outFunc(text) {
var called = false;
return function() {
if (!called) {
out(text);
called = true;
}
};
};
$('#output').val('');
});
</script>
<style>
.image_switch {
position: relative;
width: 128px;
height: 128px;
margin: 10px;
float: left;
}
.image_switch > * {
position: absolute;
top: 0;
left: 0;
background-color: #b5cede;
}
.imageBottom, .imageTop {
width: 128px;
height: 128px;
}
</style>
</head>
<body>
<div class="image_switch">
<div class="imageBottom" style="background-image: url('imgs/example_bottom_1.png');"></div>
<div class="imageTop" style="background-image: url('imgs/example_top_1.png');"></div>
</div>
<div class="image_switch">
<div class="imageBottom" style="background-image: url('imgs/example_bottom_2.png');"></div>
<div class="imageTop" style="background-image: url('imgs/example_top_2.png');"></div>
</div>
<div class="image_switch">
<div class="imageBottom" style="background-image: url('imgs/example_bottom_3.png');"></div>
<div class="imageTop" style="background-image: url('imgs/example_top_3.png');"></div>
</div>
<div class="image_switch">
<div class="imageBottom" style="background-image: url('imgs/example_bottom_4.png');"></div>
<div class="imageTop" style="background-image: url('imgs/example_top_4.png');"></div>
</div>
<div style="clear: both;"></div>
<div>
<div>
Apply Effect:
</div>
<div style="padding: 5px 0;">
<button id="start">start</button>
<button id="stop">stop</button>
</div>
</div>
<textarea id="output" style="width: 100%; height: 200px;"></textarea>
</body>
</html>
ImageSwitch Plugin Example 4:
This is the animation you can see on the www.iconexperience.com start page. It uses a combination of queuing animations,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script src="/_scripts/jquery/jquery.js" type="text/javascript"></script>
<script src="/_scripts/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="/_scripts/jquery.imageswitch.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var crossfadeElems = $('#iex_crossfade_examples .crossfade');
var startExample = function() {
// Init ImageSwitcher
crossfadeElems.imageSwitch({
duration: 1000,
pauseDuration: 1000
});
// function for random sequence order
var orders = ['forward', 'reverse', 'random'];
var i = 0;
var nextOrder = function() {
return orders[i++ % 3];
};
// loop of image switching transformation
var transformation = null;
var loop = function() {
transformation = transformation == 'fade' ? 'slide' : 'fade';
return crossfadeElems
.imageSwitch('init', { transformation: transformation })
.imageSwitch('toggle', { pauseDuration: 1000 })
.imageSwitch('toggle', { sequence: { order: nextOrder(), interval: '500' }})
.imageSwitch('toggle', { pauseDuration: 1000 })
.imageSwitch('blink', { sequence: { order: nextOrder(), interval: '500' }}, loop);
};
// start loop for the first time
loop();
// register hover
crossfadeElems.imageSwitch('hover', { onAllFinishHoverOut: loop });
};
var stopExample = function() {
crossfadeElems.imageSwitch('hover', { stop: true }).imageSwitch('stop').imageSwitch('top');
}
$('#start').click(startExample);
$('#stop').click(stopExample);
});
</script>
<style>
#iex_crossfade_examples {
width: 552px;
padding: 20px;
background: #202020;
}
#iex_crossfade_examples .tile_1_1, #iex_crossfade_examples .tile_1_2 {
float: left;
margin: 4px;
cursor: pointer;
}
#iex_crossfade_examples .tile_1_1, #iex_crossfade_examples .tile_1_1 .imageBottom, #iex_crossfade_examples .tile_1_1 .imageTop {
width: 84px;
height: 84px;
}
#iex_crossfade_examples .tile_1_2, #iex_crossfade_examples .tile_1_2 .imageBottom, #iex_crossfade_examples .tile_1_2 .imageTop {
width: 176px;
height: 84px;
}
#iex_crossfade_examples .crossfade {
position: relative;
width: 84px;
height: 84px;
}
#iex_crossfade_examples .crossfade > div {
position: absolute;
left: 0;
top: 0;
}
button {
margin: 10px 0;
}
</style>
</head>
<body>
<button id="start">start</button>
<button id="stop">stop</button>
<div id="iex_crossfade_examples">
<div class="tile_1_2">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) 0 84px;"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) 0 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -176px 84px;"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -176px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -260px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -260px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -344px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -344px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -428px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -428px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -512px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -512px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -596px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -596px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -680px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -680px 0;"></div>
</div>
</div>
<div class="tile_1_2">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -764px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -764px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -940px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -940px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -1024px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -1024px 0;"></div>
</div>
</div>
<div class="tile_1_2">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -1108px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -1108px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -1284px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -1284px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -1368px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -1368px 0;"></div>
</div>
</div>
<div class="tile_1_1">
<div class="crossfade">
<div class="imageBottom" style="background: url(/_img/crossfade_tile_sprites.png) -1452px 84px"></div>
<div class="imageTop" style="background: url(/_img/crossfade_tile_sprites.png) -1452px 0;"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Tutorial, Downloads and API:
Please refer to the projects Github page for a tutorial, downloads and the API:
https://github.com/iconexperience/imageswitch
