配色が苦手な人に!写真やイラストに使用されているカラーから画像を引き立たせる美しいグラデーションをつくりだすスクリプト -Grade.js
Post on:2016年8月25日
写真やイラストに使用されているカラーの中から、主要なカラーを選び出し、その画像を引き立たせるグラデーションをつくりだすスクリプトを紹介します。
![Grade.jsで作成したグラデーション](http://coliss.com/wp-content/uploads-201603/2016082503-01.jpg)
シンプルなカラー構成でも、繊細なグラデーションが生成されます。
![Grade.jsで作成したグラデーション](http://coliss.com/wp-content/uploads-201603/2016082503-02.jpg)
Grade.jsのデモ
デモではさまざまなタイプの画像から、美しいグラデーションを生成しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016082504-01.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201603/2016082504-02.png)
Grade.jsの使い方
Step 1: JavaScript
当スクリプトを外部ファイルとして記述し、スクリプトを初期化します。
1 2 3 4 5 6 7 8 9 10 11 |
<script src="path/to/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ /* A NodeList of all your image containers (Or a single Node). The library will locate an <img /> within each container to create the gradient from. */ Grade(document.querySelectorAll('.gradient-wrap')) }) </script> |
Step 2: HTML
グラデーションを生成する要素に「.gradient-wrap」を与えます。
1 2 3 |
<div class="gradient-wrap"> <img src="./samples/finding-dory.jpg" alt="" /> </div> |
sponsors