Lightweight Image Clipping Plugin with jQuery - Transimg.js

File Size: 77.8 KB
Views Total: 558
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Image Clipping Plugin with jQuery - Transimg.js

Transimg.js is a simple, lightweight jQuery plugin that transform your image into various shapes using CSS clip-path property, with several entrance effects powered by CSS3 animations.

How to use it:

1. Include transimg.min.css inside your head tag and transimg.min.js just before the closing body tag.

<link rel="stylesheet" href="css/transimg.min.css">
  ...
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="src/transimg.min.js"></script>

2. Just call the plugin on the img.

$('img.transform').transimg();

3. Plugin's default options.

$('img.transform').transimg({

  // round image
  circular: false,    

  // rounded corners only
  rounded:  false,    

  // addin in box shadows
  shadow:   true,     

  // allow sub animation effects
  animSet:  true,     

  // fadeUp, fadeDown, fade or spin
  animation:  "fadeUp", 

  // frame styles, webkits only
  // diamond, star, message or bevel
  frame:    "diamond" 
  
});

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