Sticky Notes Generator

A lightweight sticky notes animation generator and embeddable widget.

Preview

Generate animated sticky note style HTML that can be directly embedded in web pages to display notes.

Features

• 🎨 Multiple color themes (yellow, pink, blue, green, etc.)
• ✨ Smooth animation effects (fade in, swing, bounce, etc.)
• 📝 Custom text content
• 🖱️ Draggable - Sticky notes can be dragged anywhere on the page
• 🔘 Hover controls - Minimize and close buttons appear on hover
• 📌 Minimize feature - Click minimize button to shrink sticky note into a pill
• ❌ Close feature - Click close button to remove sticky note
• 🎯 Embeddable in any webpage
• 💾 No external dependencies, pure HTML/CSS/JS
• 📱 Responsive design with touch support

Usage

Basic Usage

You can use the prebuilt embed widget via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JoeyXi/sticky-notes-generator@v0.1.0/dist/sticky-mini.css">
<script src="https://cdn.jsdelivr.net/gh/JoeyXi/sticky-notes-generator@v0.1.0/dist/sticky-mini.js"></script>
<div class="sticky-note" data-color="yellow" data-text="This is a sticky note"></div>

Custom Options

<div class="sticky-note" 
     data-color="yellow"
     data-text="Important reminder"
     data-position="top-right"
     data-animation="fadeIn">
</div>

Supported attributes:

• data-color: Color theme (yellow, pink, blue, green, purple, orange)
• data-text: Sticky note text content
• data-position: Position (top-left, top-right, bottom-left, bottom-right, center)
• data-animation: Animation type (fadeIn, slideIn, bounce, swing)

Development

Clone and run locally:

git clone https://github.com/JoeyXi/sticky-notes-generator.git
cd sticky-notes-generator
open apps/generator/index.html

Examples

• examples/embed-simple.html - Basic embed example
• examples/embed-multiple.html - Multiple sticky notes example
• examples/embed-custom.html - Custom styling example

License

MIT