Create Animated Label Sticker Effects with Sticker.js

Category: Animation , Javascript , Recommended | February 19, 2014
Author:cmiscm
Views Total:3,976 views
Official Page:Go to website
Last Update:February 19, 2014
License:MIT

Preview:

Create Animated Label Sticker Effects with Sticker.js

Description:

Sticker.js is a fancy and cool javascript library used to create animated labels & stickers using javscript and CSS3 on your web page. Currently supports all major browsers which support CSS3 properties.

How to use it:

Place the Sticker.js javascript library anywhere on your web page.

<script src="sticker.min.js"></script>

Create an empty container for a sticker.

<div class="sticker demo"></div>

The sample CSS to style the sticker and optionally you can set a background image for it.

.sticker {
position: relative;
width: 180px;
height: 180px;
margin: 50px;
}
.example-1 .sticker-img {
background-image: url(1.png);
}

Initialize the sticker and you’re done.

<script type="text/javascript">
window.onload = function() {
Sticker.init('.sticker');
}
</script>

You Might Be Interested In:


Leave a Reply