A Javascript library that allows you to create a Sticker Effect.
Download the js file and include it in your html, and create sticker 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');
Licensed under the MIT license.
html
<script type="text/javascript" src="js/sticker.min.js"></script>
chrome console
console.log(Sticker) // Sticker is not defined
Hello, cmiscm. while mouse over in left of sticker after mouse off sticker trembling. My firefox version is 43.0.3.
안녕하세요 김종민님. 해당 라이브러리 사용중에 파이어폭스에서 에러를 찾아 이슈로 등록합니다. 파이어폭스에서 사용 할 경우 왼쪽, 위쪽에서 마우스 오버 시킨 후 되돌아올 때 이미지의 떨림이 발생합니다. 우측, 하단측에서는 떨림이 발생하지 않는데, 유독 왼쪽, 위쪽에서만 이미지의 위치가 약간 변경 되는 듯한데, 파이어폭스의 버그인지 궁금합니다. 파이어폭스 버전은 43.0.3 을 사용중입니다. 감사합니다.
Instead of having to specify the "background-image" for every sticker in the CSS, this lets you define it on the sticker element like this:
<div class="sticker" data-sticker-img="http://img.ctrlv.in/img/15/11/01/5635d779dd3e4.png"></div>
That url then gets set as the background-image style on the .sticker-img element that is created inside.
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 :).
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.
Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P
Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».
To-do-list Description "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark t
LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs
Lucid is a library, which allows you to create Cardano transactions and off-chain code for your Plutus contracts in JavaScript and Node.js.
Creativa - Popup This is a simple library that allows you to create awesome popups importing just one JavaScript file. Getting started You can import
TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no
YouTube Alternative Interaction App An app I made with Edward Wu that allows you to search and watch videos from YouTube. Leverages Google's YouTube D
Project Name : TO-Do list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mar
Todo-list "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as comple
?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How
Awesome Books A book Library. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link Getting Started This is an example of how you may
AWESOME BOOKS This is an Awesome book store project that add store and diplay books on the UI. Built With HTML,CSS, JavaScript Frameworks Github, Lint
TypeWriter Create easily a TypeWriter effect for your website Written by Luuk Walstra Discord: Luuk#8524 Github: https://github.com/Luuk-Dev Replit: h
Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu
shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla
FastDork v0.1 This chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of sc
movies-api A NodeJs service which allows you to create a movie based on it's title (additional movie details will be fetched) and fetch all created mo
ContainerMenu - A BDSX API ContainerMenu is an API for BDSX that allows you to create fake interactive container menus ! Features Multiple containers
14 Oct 3, 2022
41 Jan 4, 2023
12 Oct 18, 2022
3 May 3, 2022
243 Jan 8, 2023
5 Mar 29, 2022
9 Nov 1, 2021
2 Dec 28, 2021
13 Aug 22, 2022
4 Dec 20, 2022
18 Feb 10, 2022
4 Oct 1, 2022
5 Jul 28, 2022
2 Aug 16, 2022
111 Dec 15, 2022
6 Jun 2, 2022
74 Dec 31, 2022
2 Mar 27, 2022
8 Oct 28, 2022