JavaScript / HTML image transition effect
I'm trying to emulate the "heart" transition shown at:
http://www.templatem开发者_高级运维onster.com/flash-templates/31595.html?scr_type=1&hide_flash=0&tab=32
in HTML5 / JS, but I don't really know where to start. Any tips? JQuery-based stuff is fine by me.
Canvas clip mask is a good starting point
https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html
http://www.fabulant.com/downloadcenter/imgtransheart/imgtransheart.html
Script is v. easy to follow and modify. You can use your own heart images (the covering images are loaded in the js). Only trick is making sure the transparent aperture is smoothly scaled for each image.
精彩评论