Giter Site home page Giter Site logo

stickerjs's Introduction

Sticker.js

alt text

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.

stickerjs's People

Contributors

cmiscm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

stickerjs's Issues

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

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 :).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.