Skip to content

Commit cf83b40

Browse files
sarcadasssarcadass
committed
Fix wrong links on Doc and other minor enhancements
1 parent 5779cd6 commit cf83b40

19 files changed

+95
-88
lines changed

‎CHANGELOG.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
## 2.0.0
1+
## v2.0.0
22

33
### Features
44

55
- Add custom direction ([rhanb](https://github.com/rhanb))
66
- Add support for other color types: `rgb`, `rgba`, `hsl`, `hsla`
77
- Add custom color positions
8+
- **Remove `opacity` property**, use `rgba` or `hsla` alpha color channel if you want to use opacity in the colors
89

910
### Improvements
1011

@@ -18,7 +19,7 @@
1819
- Add multiple API versions page
1920

2021

21-
## 1.1.1
22+
## v1.1.1
2223

2324
### Miscellaneous
2425

@@ -27,7 +28,7 @@
2728
- Update node versions on for Travis CI tests
2829

2930

30-
## 1.1.0
31+
## v1.1.0
3132

3233
### Features
3334

@@ -44,7 +45,7 @@
4445
- Doc addition and improvements
4546

4647

47-
## 1.0.6 (from 1.0.0)
48+
## v1.0.6 (from v1.0.0)
4849

4950
### Bug Fixes
5051

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Granim.js [![Build Status](https://travis-ci.org/sarcadass/granim.js.svg?branch=master)](https://travis-ci.org/sarcadass/granim.js) [![codecov](https://codecov.io/gh/sarcadass/granim.js/branch/master/graph/badge.svg)](https://codecov.io/gh/sarcadass/granim.js) [![gitter](https://badges.gitter.im/sarcadass/granim.png)](https://gitter.im/Granim-js/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
22

3-
Create fluid and interactive gradients animations with this small (< 17 kB) js library.
3+
Create fluid and interactive gradient animations with this small javascript library.
44

55
**See the [demo site](http://sarcadass.github.io/granim.js)**.
66

‎docs/api-v1.1.1.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang="en"><head><title>API V1.1.1 | Granim.js</title><meta name="description" content="API for granim.js. Gradients animations in javascript."><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><link type="text/css" rel="stylesheet" href="assets/css/style.css"><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700"><link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Facebook Metas--><meta property="og:url" content="http://sarcadass.github.io/granim.js"><meta property="og:type" content="website"><meta property="og:title" content="Granim.js"><meta property="og:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="og:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><!-- Twitter Metas--><meta property="twitter:card" content="summary_large_image"><meta property="twitter:creator" content="@Sarcadass"><meta property="twitter:title" content="Granim.js"><meta property="twitter:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="twitter:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><meta property="twitter:image:width" content="1200"><meta property="twitter:image:height" content="630"><link type="text/css" rel="stylesheet" href="assets/css/prism.css"></head><body class="api"><header class="main-header"><div class="container clearfix"><div class="bloc-logo"><canvas id="logo-canvas"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div><div class="main-nav"><div class="hamburger-icon"><span></span><span></span><span></span><span></span><span></span><span></span></div><nav><ul class="clearfix"><li><a class="text-link" href="https://github.com/sarcadass/granim.js/releases" target="_blank" rel="external">Download</a></li><li><a class="text-link" id="nav-api" href="api-v2.0.0.html">API</a></li><li><a class="text-link" id="nav-examples" href="examples.html">Examples</a></li><li><a class="github" href="https://github.com/sarcadass/granim.js" target="_blank" title="Github" rel="external"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
1+
<!DOCTYPE html><html lang="en"><head><title>API V1.1.1 | Granim.js</title><meta name="description" content="API for granim.js. Gradients animations in javascript."><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><link type="text/css" rel="stylesheet" href="assets/css/style.css"><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700"><link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Facebook Metas--><meta property="og:url" content="http://sarcadass.github.io/granim.js"><meta property="og:type" content="website"><meta property="og:title" content="Granim.js"><meta property="og:description" content="Create fluid and interactive gradients animations with this small javascript library."><meta property="og:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><!-- Twitter Metas--><meta property="twitter:card" content="summary_large_image"><meta property="twitter:creator" content="@Sarcadass"><meta property="twitter:title" content="Granim.js"><meta property="twitter:description" content="Create fluid and interactive gradients animations with this small javascript library."><meta property="twitter:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><meta property="twitter:image:width" content="1200"><meta property="twitter:image:height" content="630"><link type="text/css" rel="stylesheet" href="assets/css/prism.css"></head><body class="api"><header class="main-header"><div class="container clearfix"><div class="bloc-logo"><canvas id="logo-canvas"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div><div class="main-nav"><div class="hamburger-icon"><span></span><span></span><span></span><span></span><span></span><span></span></div><nav><ul class="clearfix"><li><a class="text-link" href="https://github.com/sarcadass/granim.js/releases" target="_blank" rel="external">Download</a></li><li><a class="text-link" id="nav-api" href="api-v2.0.0.html">API</a></li><li><a class="text-link" id="nav-examples" href="examples.html">Examples</a></li><li><a class="github" href="https://github.com/sarcadass/granim.js" target="_blank" title="Github" rel="external"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
22
<g>
33
<path fill-rule="evenodd" clip-rule="evenodd" fill="#221E1B" d="M12.476,0C5.587,0,0,5.586,0,12.476
44
c0,5.512,3.575,10.189,8.533,11.842c0.623,0.113,0.853-0.271,0.853-0.604c0-0.296-0.011-1.279-0.017-2.32
@@ -25,7 +25,7 @@
2525
C8.749,20.2,8.856,20.097,8.999,20.07C9.147,20.044,9.279,20.104,9.297,20.206L9.297,20.206z M9.297,20.206"/>
2626
</g>
2727
</svg>
28-
</a></li></ul></nav></div></div></header><div class="main-content"><div class="container bloc"><div class="title-bloc"><h1>API <span class="api-version">V1.1.1</span></h1><select id="version-select"><option value="/api-v2.0.0.html">v2.0.0</option><option value="/api-v1.1.1.html">v1.1.1</option></select></div><h2>options</h2><p>All the global options available.</p><table class="api-list"><thead><tr><th>Property</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>element <span class="required">(required)</span></td><td>/</td><td>String or HTMLCanvasElement</td><td>A CSS selector for the <span class="snippet">canvas</span> element or the <span class="snippet">HTMLCanvasElement</span> itself (e.g. <span class="snippet">'#granim-canvas'</span> or <span class="snippet">document.querySelector('#granim-canvas')</span>) that will be used for the gradient animation.</td></tr><tr><td>name</td><td>false</td><td>String</td><td>This is the prefix used for the dark / light class name added
28+
</a></li></ul></nav></div></div></header><div class="main-content"><div class="container bloc"><div class="title-bloc"><h1>API <span class="api-version">V1.1.1</span></h1><select id="version-select"><option value="api-v2.0.0.html">v2.0.0</option><option value="api-v1.1.1.html">v1.1.1</option></select></div><h2>options</h2><p>All the global options available.</p><table class="api-list"><thead><tr><th>Property</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>element <span class="required">(required)</span></td><td>/</td><td>String or HTMLCanvasElement</td><td>A CSS selector for the <span class="snippet">canvas</span> element or the <span class="snippet">HTMLCanvasElement</span> itself (e.g. <span class="snippet">'#granim-canvas'</span> or <span class="snippet">document.querySelector('#granim-canvas')</span>) that will be used for the gradient animation.</td></tr><tr><td>name</td><td>false</td><td>String</td><td>This is the prefix used for the dark / light class name added
2929
on the <span class="snippet">options.elToSetClassOn</span> element depending on the average gradient lightness,
3030
the class will be updated during the animation.<br><strong>If you don't set a name, the class won't be set.</strong></td></tr><tr><td>elToSetClassOn</td><td>'body'</td><td>String</td><td>The element to set the dark / light class on (e.g. <span class="snippet">'#canvas-wrapper'</span>)<br><strong>Only useful if you set a <span class="snippet">name</span>.</strong></td></tr><tr><td>direction</td><td>'diagonal'</td><td>String</td><td>The orientation of the gradient, you can choose between:<ul><li><span class="snippet">'diagonal'</span></li><li><span class="snippet">'left-right'</span></li><li><span class="snippet">'top-bottom'</span></li><li><span class="snippet">'radial'</span></li></ul></td></tr><tr><td>isPausedWhenNotInView</td><td>false</td><td>Boolean</td><td>Does the animation stop when it's not in window view?<br>
3131
(Despite this parameter, the animation always pause

‎docs/api-v2.0.0.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang="en"><head><title>API V2.0.0 | Granim.js</title><meta name="description" content="API for granim.js. Gradients animations in javascript."><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><link type="text/css" rel="stylesheet" href="assets/css/style.css"><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700"><link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Facebook Metas--><meta property="og:url" content="http://sarcadass.github.io/granim.js"><meta property="og:type" content="website"><meta property="og:title" content="Granim.js"><meta property="og:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="og:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><!-- Twitter Metas--><meta property="twitter:card" content="summary_large_image"><meta property="twitter:creator" content="@Sarcadass"><meta property="twitter:title" content="Granim.js"><meta property="twitter:description" content="Create fluid and interactive gradients animations with this small (&lt; 17kB) .js library"><meta property="twitter:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><meta property="twitter:image:width" content="1200"><meta property="twitter:image:height" content="630"><link type="text/css" rel="stylesheet" href="assets/css/prism.css"></head><body class="api"><header class="main-header"><div class="container clearfix"><div class="bloc-logo"><canvas id="logo-canvas"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div><div class="main-nav"><div class="hamburger-icon"><span></span><span></span><span></span><span></span><span></span><span></span></div><nav><ul class="clearfix"><li><a class="text-link" href="https://github.com/sarcadass/granim.js/releases" target="_blank" rel="external">Download</a></li><li><a class="text-link" id="nav-api" href="api-v2.0.0.html">API</a></li><li><a class="text-link" id="nav-examples" href="examples.html">Examples</a></li><li><a class="github" href="https://github.com/sarcadass/granim.js" target="_blank" title="Github" rel="external"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
1+
<!DOCTYPE html><html lang="en"><head><title>API V2.0.0 | Granim.js</title><meta name="description" content="API for granim.js. Gradients animations in javascript."><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><link type="text/css" rel="stylesheet" href="assets/css/style.css"><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700"><link rel="icon" href="favicon.ico" type="image/x-icon"><!-- Facebook Metas--><meta property="og:url" content="http://sarcadass.github.io/granim.js"><meta property="og:type" content="website"><meta property="og:title" content="Granim.js"><meta property="og:description" content="Create fluid and interactive gradients animations with this small javascript library."><meta property="og:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><!-- Twitter Metas--><meta property="twitter:card" content="summary_large_image"><meta property="twitter:creator" content="@Sarcadass"><meta property="twitter:title" content="Granim.js"><meta property="twitter:description" content="Create fluid and interactive gradients animations with this small javascript library."><meta property="twitter:image" content="http://sarcadass.github.io/granim.js/assets/img/social-image.png"><meta property="twitter:image:width" content="1200"><meta property="twitter:image:height" content="630"><link type="text/css" rel="stylesheet" href="assets/css/prism.css"></head><body class="api"><header class="main-header"><div class="container clearfix"><div class="bloc-logo"><canvas id="logo-canvas"></canvas><a class="logo-mask" href="index.html">Granim.js</a></div><div class="main-nav"><div class="hamburger-icon"><span></span><span></span><span></span><span></span><span></span><span></span></div><nav><ul class="clearfix"><li><a class="text-link" href="https://github.com/sarcadass/granim.js/releases" target="_blank" rel="external">Download</a></li><li><a class="text-link" id="nav-api" href="api-v2.0.0.html">API</a></li><li><a class="text-link" id="nav-examples" href="examples.html">Examples</a></li><li><a class="github" href="https://github.com/sarcadass/granim.js" target="_blank" title="Github" rel="external"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
22
<g>
33
<path fill-rule="evenodd" clip-rule="evenodd" fill="#221E1B" d="M12.476,0C5.587,0,0,5.586,0,12.476
44
c0,5.512,3.575,10.189,8.533,11.842c0.623,0.113,0.853-0.271,0.853-0.604c0-0.296-0.011-1.279-0.017-2.32
@@ -25,7 +25,7 @@
2525
C8.749,20.2,8.856,20.097,8.999,20.07C9.147,20.044,9.279,20.104,9.297,20.206L9.297,20.206z M9.297,20.206"/>
2626
</g>
2727
</svg>
28-
</a></li></ul></nav></div></div></header><div class="main-content"><div class="container bloc"><div class="title-bloc"><h1>API <span class="api-version">V2.0.0</span></h1><select id="version-select"><option value="/api-v2.0.0.html">v2.0.0</option><option value="/api-v1.1.1.html">v1.1.1</option></select></div><h2>options</h2><p>All the global options available.</p><table class="api-list"><thead><tr><th>Property</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>element <span class="required">(required)</span></td><td>/</td><td>String or HTMLCanvasElement</td><td>A CSS selector for the <span class="snippet">canvas</span> element or the <span class="snippet">HTMLCanvasElement</span> itself (e.g. <span class="snippet">'#granim-canvas'</span> or <span class="snippet">document.querySelector('#granim-canvas')</span>) that will be used for the gradient animation.</td></tr><tr><td>name</td><td>false</td><td>String</td><td>This is the prefix used for the dark / light class name added
28+
</a></li></ul></nav></div></div></header><div class="main-content"><div class="container bloc"><div class="title-bloc"><h1>API <span class="api-version">V2.0.0</span></h1><select id="version-select"><option value="api-v2.0.0.html">v2.0.0</option><option value="api-v1.1.1.html">v1.1.1</option></select></div><h2>options</h2><p>All the global options available.</p><table class="api-list"><thead><tr><th>Property</th><th>Default</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>element <span class="required">(required)</span></td><td>/</td><td>String or HTMLCanvasElement</td><td>A CSS selector for the <span class="snippet">canvas</span> element or the <span class="snippet">HTMLCanvasElement</span> itself (e.g. <span class="snippet">'#granim-canvas'</span> or <span class="snippet">document.querySelector('#granim-canvas')</span>) that will be used for the gradient animation.</td></tr><tr><td>name</td><td>false</td><td>String</td><td>This is the prefix used for the dark / light class name added
2929
on the <span class="snippet">options.elToSetClassOn</span> element depending on the average gradient lightness,
3030
the class will be updated during the animation.<br><strong>If you don't set a name, the class won't be set.</strong></td></tr><tr><td>elToSetClassOn</td><td>'body'</td><td>String</td><td>The element to set the dark / light class on (e.g. <span class="snippet">'#canvas-wrapper'</span>)<br><strong>Only useful if you set a <span class="snippet">name</span>.</strong></td></tr><tr><td>direction</td><td>'diagonal'</td><td>String</td><td>The orientation of the gradient, you can choose between:<ul><li><span class="snippet">'diagonal'</span></li><li><span class="snippet">'left-right'</span></li><li><span class="snippet">'top-bottom'</span></li><li><span class="snippet">'radial'</span></li><li><span class="snippet">'custom'</span></li></ul></td></tr><tr><td>customDirection</td><td>/</td><td>Object</td><td>Let you customize the direction of the gradient with pixels or percentage values with the following format:<pre><code class="language-js">{
3131
x0: '10%',

0 commit comments

Comments
 (0)