Tres Innovation

2017年07月10日

2017年 WEBデザイントレンドのグラデーションをアニメーションさせる事ができるライブラリ「Granim.js」

Pocket

 

 

 

お久しぶりです、番野です。

 

トレスイノベーションでは主に制作の部分で携わらせてもらっています。

 

毎年ながら年末から年始にかけては次の年のデザインのトレンドを探り、その年のデザインご提案時の話題にさせてもらっています。

 

2017年のトレンドの1つとしてグラデーションが大きな復活を果たすとチラチラみかけます。

 

以前グラデーションがトレンドになったときは、全体的に淡い配色のバリエーションが特長で、Apple の iOS アイコンがもっとも良い例でした。

2017年版のグラデーションは、鮮やかで利用する色数も豊富で色のぼかし方やテクニックは変わってくる模様です。

 

確かに海外でもグラデーションを活用したサイトが増えているなーと思っていた所でした。

 

そんなトレンドのグラデーションを活用出来るライブラリ「Granim.js」をご紹介します。

 

使い方

まずはデモ画面が用意されているので、どんなものか確認してみてください。

 

 

 

 必要ファイルのダウンロード

 

https://github.com/sarcadass/granim.js/releases

上記GitHubより最新版をダウンロードしてください。

 

基本的にダウンロードファイル内のgranim.min.jsがあれば良しです。

 

 

 

ファイルの設置とスクリプトの記述

 

granim.min.jsを/bodyの手前に読み込みます。※パスはご利用の環境に合わせて下さい。

 

 

次にスクリプトの記述です。読み込んだライブラリ直下に記述するも良し、外部ファイルから読み込む良しです。

 

 

HTML内の記述

 

次にHTML内の記述です。

<canvas>を用意し、先ほど指定した#canvas-basicをid付け足してください。

 

 

SAMPLE01

 

基本的にはこちらの記述があれば下記のように表示されます。

 

SAMPLE01

 

いかがですか?しっかりグラデーションのアニメーションができているかと思います。

 

ここまではとっても簡単ですね。

 

グラデーションの色の変更や透過の調整はAPIを確認してみてください。

色々と調整ができます。

 

 

 

ちょっぴり応用編

 

世の中にたくさんあるライブラリをどう活かすかが、制作会社の一つの役目ですね。

 

という事で今回は弊社のロゴにこのライブラリを使用してグラデーションをかけてみようと思います。

 

HTML & JS

 

ここではtransitionSpeed: 700を付け足し、グラデーションの変化する速度を調整しています。

css

canvas、各要素に対して対してpositonをかけ、グラデーションをかけたい背景画像を指定します。

 

そうする事でこのようになります。

 

SAMPLE02

ロゴにグラデーションがかかっていますね。
その他にも

 

SAMPLE03

 

このような感じで、ちょこっとグラデーションを活用したいと思った時に活躍してくれそうです。

 

まとめ

いかがでしたか?

今回は簡単にご説明とちょこっと応用編をお伝えしてみましたがもっとオプションを活用、表現方法を考えたら色んなことができそうなライブラリですね。

 

この記事が少しでもお役立ちになれば幸いです。

 

この記事を書いた人

採用情報

I hope share!この記事をシェアする