Light

stefanjudis / sparkly-text Goto Github PK

View Code? Open in Web Editor NEW

198.0 3.0 6.0 165 KB

A small web component for making your text spark.

Home Page: https://www.stefanjudis.com/blog/a-web-component-to-make-your-text-sparkle/

License: MIT License

HTML 30.23% JavaScript 69.77%

custom-elements html-components web-components

sparkly-text's Introduction

`sparkly-text`

A small zero-dependency Web Component to add sparkles to text fragments.

Examples

<!-- Add sparkles  -->
<sparkly-text>Hello sparkles</sparkly-text>

<!-- Increase the number of sparkles  -->
<sparkly-text number-of-sparkles="5">Hello sparkles</sparkly-text>

<!-- Color the sparkles  -->
<sparkly-text style="--sparkly-text-color: orange">Hello sparkles</sparkly-text>

<!-- Increase the sparkle size  -->
<sparkly-text style="--sparkly-text-size: 2.5em">Hello sparkles</sparkly-text>

Installation

You have a few options (choose one of these):

Install via npm: npm install @stefanjudis/sparkly-text
Download the source manually from GitHub into your project.
Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

<!-- Host yourself -->
<script type="module" src="sparkly-text.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@stefanjudis/sparkly-text"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@stefanjudis/sparkly-text"></script>

Kudos

Big thanks goes to Zach Leatherman for all his fancy components such as table-saw.

sparkly-text's People

Contributors

Stargazers

Watchers

Forkers

miklb argyleink tbroyer sensi2000 yuanchuan imhalid

sparkly-text's Issues

Sparkles make words jump (on small screen sizes)

When sparkles appear / disappear they make words jump to the next line (and back)

captures (around 430px viewport width, chrome desktop) same on android device (412px viewport with)

chrome bug it seems, as the span & svg are positioned (absolute) they should not make siblings move.
firefox & safari mac do not seem to be affected.

note : a sparkle may appear at the end of an empty line (when one word go to next line)
a solution might be to not place with top & left but create a span for each word and place randomly the sparkle wrapper between the spans.

After leaving the window / tab all sparkles fire at once

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.