配色が苦手な人に！写真やイラストに使用されているカラーから画像を引き立たせる美しいグラデーションをつくりだすスクリプト -Grade.js
Post on:2016年8月25日
sponsors
写真やイラストに使用されているカラーの中から、主要なカラーを選び出し、その画像を引き立たせるグラデーションをつくりだすスクリプトを紹介します。
シンプルなカラー構成でも、繊細なグラデーションが生成されます。
Grade.jsのデモ
デモではさまざまなタイプの画像から、美しいグラデーションを生成しています。
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
