├── package.json ├── README.md ├── LICENSE └── click-spark.js /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "click-spark", 3 | "version": "2.1.0", 4 | "description": "A web component that adds a little spark to your clicks", 5 | "main": "click-spark.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/hexagoncircle/click-spark.git" 10 | }, 11 | "author": { 12 | "name": "Ryan Mulligan", 13 | "email": "hey@ryanmulligan.dev", 14 | "url": "https://ryanmulligan.dev/" 15 | }, 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/hexagoncircle/click-spark/issues" 19 | }, 20 | "homepage": "https://github.com/hexagoncircle/click-spark#readme" 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `` Web Component 2 | 3 | Add a little spark to your clicks. ✨ 4 | 5 | [CodePen demo](https://codepen.io/hexagoncircle/full/bGZdWyw) | [Blog post](https://ryanmulligan.dev/blog/click-spark/) 6 | 7 | ## Install 8 | 9 | ``` 10 | npm install click-spark 11 | ``` 12 | 13 | Or you can download the `click-spark.js` file from this repo and add it to your project. 14 | 15 | ## Usage 16 | 17 | Add the custom element wherever we want to see sparks fly. 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 |

25 | 26 |

27 | 28 | 29 | 30 | 31 | ``` 32 | 33 | ## Change spark color 34 | 35 | Set a spark color via CSS custom property: 36 | 37 | ```html 38 | 39 | ``` 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Ryan Mulligan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /click-spark.js: -------------------------------------------------------------------------------- 1 | class ClickSpark extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | connectedCallback() { 8 | this.shadowRoot.innerHTML = this.createSpark(); 9 | this.svg = this.shadowRoot.querySelector("svg"); 10 | this._parent = this.parentNode; 11 | this._parent.addEventListener("click", this); 12 | } 13 | 14 | disconnectedCallback() { 15 | this._parent.removeEventListener("click", this); 16 | delete this._parent; 17 | } 18 | 19 | handleEvent(e) { 20 | this.setSparkPosition(e); 21 | this.animateSpark(); 22 | } 23 | 24 | animateSpark() { 25 | let sparks = [...this.svg.children]; 26 | let size = parseInt(sparks[0].getAttribute("y1")); 27 | let offset = size / 2 + "px"; 28 | 29 | let keyframes = (i) => { 30 | let deg = `calc(${i} * (360deg / ${sparks.length}))`; 31 | 32 | return [ 33 | { 34 | strokeDashoffset: size * 3, 35 | transform: `rotate(${deg}) translateY(${offset})`, 36 | }, 37 | { 38 | strokeDashoffset: size, 39 | transform: `rotate(${deg}) translateY(0)`, 40 | }, 41 | ]; 42 | }; 43 | 44 | let options = { 45 | duration: 660, 46 | easing: "cubic-bezier(0.25, 1, 0.5, 1)", 47 | fill: "forwards", 48 | }; 49 | 50 | sparks.forEach((spark, i) => spark.animate(keyframes(i), options)); 51 | } 52 | 53 | setSparkPosition(e) { 54 | this.style.left = e.pageX - this.clientWidth / 2 + "px"; 55 | this.style.top = e.pageY - this.clientHeight / 2 + "px"; 56 | } 57 | 58 | createSpark() { 59 | return ` 60 | 66 | 73 | `; 74 | } 75 | } 76 | 77 | customElements.define("click-spark", ClickSpark); 78 | --------------------------------------------------------------------------------