cmiscm/stickerjs

Sticker.js

A Javascript library that allows you to create a Sticker Effect.

• No dependencies
• Works in most of major browsers that support CSS 3 (IE10+)
• MIT License

Example

http://stickerjs.cmiscm.com/

Usage

Download the js file and include it in your html, and create sticker elements.

	<!-- dom elements -->
	<div class="sticker example-1"></div>

	<div class="sticker example-2"></div>
	
    <script type="text/javascript" src="sticker.min.js"></script>

Add background image or background color. you can also change the shadow opacity.

	.sticker {
		width: 180px;
		height: 180px;
	}

	// add image
	.example-1 .sticker-img {
		background-image: url(heroes-2.png);
	}

	// add color
	.example-2 .sticker-img {
		background-color: #ff4a85;
	}

	// change shadow opacity
	.example-2 .sticker-shadow {
		opacity: 0.6;
	}

Call the init() method with target elements (.className or #ID).

    Sticker.init('.sticker');

License

Licensed under the MIT license.

• http://www.opensource.org/licenses/mit-license.php

stickerjs's Issues

Update website browser banner with updated firefox logo

Background color staying in place while sticker is peeled

Cool plugin. I followed the docs but when I hover over my stickers the peeling action occurs but my background-color is still underneath the area that is being peeled. Here is a fiddle of my problem.
http://jsfiddle.net/tripstar22/gDVY8/

sticker trembling in firefox v43.0.3

Hello, cmiscm.
while mouse over in left of sticker after mouse off sticker trembling.
My firefox version is 43.0.3.

안녕하세요 김종민님.
해당 라이브러리 사용중에 파이어폭스에서 에러를 찾아 이슈로 등록합니다.
파이어폭스에서 사용 할 경우 왼쪽, 위쪽에서 마우스 오버 시킨 후 되돌아올 때 이미지의 떨림이 발생합니다. 우측, 하단측에서는 떨림이 발생하지 않는데, 유독 왼쪽, 위쪽에서만 이미지의 위치가 약간 변경 되는 듯한데, 파이어폭스의 버그인지 궁금합니다.
파이어폭스 버전은 43.0.3 을 사용중입니다.
감사합니다.

Funky behaviour for second and third stickers

The first image peels perfectly, but the second sticker just slides and gets cropped. The third sticker vanishes. Not sure if its a browser or OS issue. I am on Chrome v27.0.1453.93 on Ubuntu 11.10 (if that helps).

Please refer the image link below.

2 images

i think it breaks the size of the sticker after refreshing with ajax (sammy)

Sticker is not define

html

<script  type="text/javascript" src="js/sticker.min.js"></script>

chrome console

console.log(Sticker) // Sticker is not defined

45 degree peel?

Hi,
is it also possible to have a 45 degree peel?
For an upcoming version it would be great if html-elements could also be peeled. But I think it is hard to realize :).