Transform Images Into Sleek Spheres - Glossify.js

File Size: 55.5 KB
Views Total: 1615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Transform Images Into Sleek Spheres - Glossify.js

Glossify.js is a fancy jQuery plugin that converts your images into sleek 3D spheres (with shadow and inner glow) using HTML5 canvas API. 

How to use it:

1. Download and load the glossify.js script after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/glossify.js"></script>

2. Just add the data-gloss attribute to the images within the document and we're done.

<img src="facebook.png" data-gloss />
<img src="twitter.png" data-gloss />
<img src="instagram.png" data-gloss />
<img src="chrome.png" data-gloss />
<img src="firefox.png" data-gloss />
<img src="opera.png" data-gloss />

3. Customize the color using the data-glosscolor attribute:

<img src="facebook.png" data-gloss data-glosscolor="#265999" />
<img src="twitter.png" data-gloss data-glosscolor="#00b0ef" />
<img src="instagram.png" data-gloss data-glosscolor="#00749c" />

4. Customize the alpha using the data-glossalpha attribute:

<img src="chrome.png" data-gloss data-glossalpha="0.8" />
<img src="firefox.png" data-gloss data-glossalpha="0.8" />
<img src="opera.png" data-gloss data-glossalpha="0.8" />

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