https://github.com/samthor/rainbows
meta theme-color control library via Web Animations
https://github.com/samthor/rainbows
Last synced: 8 months ago
JSON representation
meta theme-color control library via Web Animations
- Host: GitHub
- URL: https://github.com/samthor/rainbows
- Owner: samthor
- Archived: true
- Created: 2015-01-21T04:31:05.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-01-24T03:42:49.000Z (over 11 years ago)
- Last Synced: 2025-10-12T03:11:41.801Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 207 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Helper to animate the `theme-color` meta tag using Web Animations. [Video](http://youtu.be/wolnA7rgHUM) or [demo](https://cdn.rawgit.com/samthor/rainbows/v0.1.1/rainbows.html) (Chrome 36+, Android only for now).
## Install
Optional install with Bower:
$ bower install rainbows
Requires [Web Animations](http://caniuse.com/#feat=web-animation) or a [suitable polyfill](https://github.com/web-animations/web-animations-js).
## Usage
```html
```
Or, if you'd like to just link to the CDN:
```html
```
```js
RColor.default = 'pink';
var steps = [{ background: 'red' }, { background: 'blue' }];
var anim = RColor.animate(steps, { duration: 2000, iterations: 2 });
anim.onfinish = function() {
console.info('done!');
};
var steps = ['rgb(255, 128, 0)', 'hsl(128, 80%, 100%)'];
var anim = RColor.animate(steps, { duration: 1500, direction: 'reverse' });
window.setTimeout(function() {
anim.pause();
window.setTimeout(function() {
anim.cancel();
}, 500);
}, 500);
```
The `animate` method is called as per the `Element.animate()` in Web Animations, except that a step consisting of just a string is automatically converted to animate the `background` property (see the second example).