Smooth picture change - Javascript, SVG and VML

At one of the developed sites (martial arts school) it was necessary to place icons with sports that are in this school. As a result, the designer proposed this solution:



What pleased us and the customer. Naturally, such beauty should have been added to this beauty, such as surfacing upward on the picture when hovering and highlighting the color of the picture. There was a question how to technically implement.

')
I rejected the idea of ​​Flash very quickly, because

1. There is no person who knows well flash in the team

2. I have a flash lock on everything by default, because more often there is only advertising (hello, habr)

3. need a plugin - it is clear that it costs 95% of the machines, but still

4. why flash, if it can be so on js + svg / vml?

I didn’t want to write native methods from scratch on SVG (for normal browsers) and VML (for IE, SVG support is only through the plugin) - excellent lib raphael was found from our Russian developer Dmitry Baranovsky (by the way, he is on Habré, but I don’t remember , there are no reflections on Rafael on Habré).

Quickly enough, from all the drawings, what was on the layout was assembled - they were placed and rotated with a structure of this type:

var R = Raphael ("top_sports", 665, 274); // create a field for drawing, top_sports - id diva, numbers - field size

var img_wushu = R.image ("wushu.png", 0, 75, 178, 137) .animate ({rotation: 2}, 0); // create an image in coordinates of 0.75 in size 178x137 and rotate by 2 degrees, 0 after 2 means that it is necessary to rotate instantly

As you can see - everything is extremely simple, clear and beautiful.

After that, the question arose how to make the pictures pop up when you hover. To do this, you need to hang a small handler, which is also done easily and simply:

$ (img_wushu.node) .mouseover (function (evt) {img_wushu_back.toFront ();});

Now the pictures when hovering began to instantly display from above, which was already better than nothing, but still very ugly. I wanted the picture to gradually appear on top, making the user aware of what is happening. However, the toFront method was discouraging with its cadrelessness ... And the solution, of course, was found - probably the attempts of the game maiden and the many read articles on the topic affected.

There was a thought to make the ascent of the image an additional layer, which will first be sent toFront, and then it will change the transparency from 0 to 100. Plus, you will need a couple of small actions, which I will explain along the way.

First we create two pictures for each sport:

var img_wushu = R.image (wushu_src, 0, 75, 178, 137); // created the main picture

var img_wushu_back = R.image (wushu_src, 0, 75, 178, 137) .hide (). animate ({rotation: 2}, 0) .toBack (). show (); // created, hidden, turned, sent back and there already showed a picture that we will use for smoothness

img_wushu.animate ({rotation: 2}, 0); // rotated the main picture

Rotation of the main picture only happens at the end so that the user is guaranteed not to have a chance to see the creation of the second picture and some flickering associated with it. In principle, everything happens quickly and I could not notice such an effect, but I was still slightly reinsured.

Now the new onmouseover handlers (using jquery):

$ (img_wushu.node) .mouseover (function (evt) {

img_wushu_back.attr ({opacity: 0}). // the image used for smoothness is made completely transparent

toFront (). // put it to the top

animate ({opacity: 1}, 500); // and slowly, for half a second we materialize it in front of the user

setTimeout (function () {img_wushu.insertAfter (img_wushu_back);}, 501);}); // after the intermediate picture has become opaque, we place the main picture on it, and we don’t lay down toFront anymore, so another picture may pop up from above, and lay it over the intermediate picture.

That's all the solution - it turned out very original. Crossbrowser - IE6 +, Opera, FF, Safari, probably Chrome, but didn’t check it. A separate advantage can be noted that it works even in Opera Mobile. Maybe it will work in the latest mobile IE, but I can not check it.

Here you can see a living example of the resulting.

PS Cross-post from blog.itea-lab.ru in order to avoid X-effect

update Of course, it is necessary to somehow automate this all, in order to add each picture with one short line - or to issue a plugin for raphael, or at least to wrap the function. But these are household trifles, which we will decide along the way. :)

update 2 All the same, the server is covered. Well so - even on ssh does not let. How priotputit - I will write.

update 3 Habra effect temporarily released. You can continue. )

I’ll give you a link to the school’s website in the next post, when we’ll finish the current example, complete the site as a whole and prepare a little bit better for the x-effect.

Web Studio iTea Lab - website creation in Murmansk