Easy Image Morphing Effect with jQuery and Canvas - morphing.js

morphing.js is a lightweight jQuery plugin to create an Html5 canvas based image morphing effect responding to mouse move.

Basic Usage:

1. Include the jQuery library and the jQuery morphing.js at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.morphing.js"></script>

2. Insert an image into a container element.

<div class="js-morphing">
  <img src="img/pic.jpg" height="200" width="200" alt="">
</div>

3. Call the function on the container element you just created to initialize the plugin with defaults.

$(function(){

  $('.js-morphing').morphing();

});

4. Call the function on the container element you just created to initialize the plugin with defaults.

$(function(){
$('.js-morphing').morphing();
});

5. Available options and defaults.

$(function(){
$('.js-morphing').morphing({
umVert: 6,
spring: 0.005,
friction: 0.90,
radius: 90,
fps: 45});
});

---

This awesome jQuery plugin is developed by ANTON072. For more Advanced Usages, please check the demo page or visit the official website.