的JavaScript/HTML圖像過渡效果

Question

我試圖仿效在顯示的「心臟」過渡：

http://www.templatemonster.com/flash-templates/31595.html?scr_type=1&hide_flash=0&tab=32

在HTML5/JS

，但我真的不知道從哪裏開始。有小費嗎？基於JQuery的東西對我來說很好。

Answer 1

帆布剪裁蒙版是一個很好的起點
https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html

Answer 2

http://www.fabulant.com/downloadcenter/imgtransheart/imgtransheart.html

Script是訴容易跟蹤和修改。您可以使用自己的心臟圖像（覆蓋圖像加載到js中）。唯一的技巧就是確保每張圖片的透明光圈都能平滑縮放。