开发者

JavaScript / HTML image transition effect

开发者 https://www.devze.com 2023-03-22 20:09 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消