├── .gitignore ├── naruto.gif ├── index.css ├── package.json ├── index.js ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /naruto.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngoue/animeXYZ/HEAD/naruto.gif -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | #animexyz-naruto { 2 | position: absolute; 3 | bottom: 0px; 4 | left: -50px; 5 | animation: naruto 0.5s forwards linear; 6 | } 7 | 8 | #animexyz-naruto img { 9 | position: relative; 10 | height: 50px; 11 | } 12 | 13 | @keyframes naruto { 14 | to { 15 | left: 100%; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animexyz", 3 | "version": "1.1.0", 4 | "description": "An animation library that makes a tiny Naruto run across the bottom of your screen every time a new page loads", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ngoue/animeXYZ.git" 12 | }, 13 | "keywords": [ 14 | "animation", 15 | "anime", 16 | "naruto" 17 | ], 18 | "author": "jordanthomasg@gmail.com", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/ngoue/animeXYZ/issues" 22 | }, 23 | "homepage": "https://github.com/ngoue/animeXYZ#readme" 24 | } 25 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | require('./index.css') 4 | 5 | // hosted courtesy of github 6 | const narutoSrc = `https://raw.githubusercontent.com/ngoue/animeXYZ/main/naruto.gif` 7 | 8 | module.exports = function (options) { 9 | // get options (defaults set here) 10 | const {duration, size} = Object.assign({ 11 | duration: 500, 12 | size: 50, 13 | }, options) 14 | 15 | // create and style components 16 | const container = document.createElement('div') 17 | container.id = `animexyz-naruto` 18 | container.style.left = `-${size}px` 19 | container.style.animationDuration = `${(duration/1000)}s` 20 | 21 | const img = document.createElement(`img`) 22 | img.src = narutoSrc 23 | img.style.height = `${size}px` 24 | 25 | // add elements to the DOM 26 | container.appendChild(img) 27 | document.body.appendChild(container) 28 | 29 | // remove after animating 30 | setTimeout(() => { 31 | container.remove() 32 | }, duration) 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Jordan 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # animeXYZ 2 | 3 | An animation library that makes a tiny Naruto run across the bottom of 4 | your screen every time a new page loads. 5 | 6 | 7 | ## Usage 8 | 9 | Import the package and invoke the function to see Naruto run across the 10 | bottom of your screen. 11 | 12 | ```js 13 | import naruto from 'animexyz' 14 | 15 | naruto() 16 | ``` 17 | 18 | ## Options 19 | 20 | ``naruto`` accepts an optional object as its only parameter that allows 21 | you to override the default settings. Options include: 22 | 23 | | Key | Type | Default | Description | 24 | |---------|------|---------|-----------------------------------------| 25 | |duration |int |500 |duration of the animation (milliseconds) | 26 | |size |int |50 |size of the Naruto image (pixels) | 27 | 28 | ```js 29 | // make Naruto even faster! 30 | naruto({duration: 200}) 31 | ``` 32 | 33 | ## react-router-dom integration 34 | 35 | To see Naruto on every page change, subscribe to location changes: 36 | 37 | ```js 38 | import naruto from 'animexyz' 39 | import React from 'react' 40 | import { useLocation } from 'react-router-dom' 41 | 42 | export function YourComponent() { 43 | let location = useLocation() 44 | 45 | useEffect(naruto, [location]) 46 | } 47 | ``` 48 | --------------------------------------------------------------------------------