arafatamim / ombro

Create beautiful, dynamic shadows in JavaScript

Home Page:https://arafatamim.github.io/ombro/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ombro.js

npm npm

Create beautiful, dynamic shadows using JavaScript.

"Ombro" is a noun meaning "shadow" in Esperanto.

https://nodei.co/npm/ombro.png?downloads=true&downloadRank=true&stars=true

Installation

NPM:

npm install ombro

Using it in a script tag (IIFE), where the ombro namespace is available globally:

<script type="text/javascript" src="https://unpkg.com/ombro/dist/iife/index.js"></script>

Importing as an ES module:

<script type="module">
import { Ombro } from "https://unpkg.com/ombro/dist/esm/index.js"
...
</script>

Usage

import { Ombro, Color } from "ombro"

// Create an Ombro instance and attach it to the DOM element you'd like to shine
const element = document.getElementById("element")
const ombro = new Ombro(element, {
    // Optionally set configuration options
    shadowColor: new Color(0, 0, 0)
})

// Set the light position to mouse pointer coordinates
window.addEventListener("mousemove", function(event) {
    ombro.setLightPosition(event.x, event.y)	// set coordinates of light position
    ombro.draw()	// redraw shadows on change
}, false)

Preview:

ombro_demo.mp4

API Reference

The full API documentation is available here.

Contributing

Please open a new issue if you discover a bug or want to discuss a feature. If you have a bug fix ready, you are welcome to open a pull request.

Credits

Forked from the unmaintained library shine.js and ported to TypeScript.

License

MIT Licensed.

© 2021 Tamim Arafat.

ezoic increase your site revenue

About

Create beautiful, dynamic shadows in JavaScript

https://arafatamim.github.io/ombro/

License:MIT License


Languages

Language:TypeScript 92.3%Language:JavaScript 7.7%