Technical Information

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.

HTML:

<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.

CSS:

.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.

SCRIPT:

$(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:

Full Source:  





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.

SCRIPT:

$(selector).imageSwitch('hover');
Full Source:  

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
Full Source:  

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 });
Full Source:  

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,

Full Source:  

Tutorial, Downloads and API:

Please refer to the projects Github page for a tutorial, downloads and the API:

https://github.com/iconexperience/imageswitch

incors
© Copyright 2017
Company    Imprint    Legal