Help us understand the problem. What is going on with this article?

Granim.jsでグラデーションをアニメーション表示してWebサイトをリッチにしよう

More than 3 years have passed since last update.

Kobito.ZPkCyH.png

GitHubでトレンド入りしているJavaScriptライブラリGranim.jsの紹介記事です。

デモ画面が用意されているのでどんなのか見てみてください。

※執筆時点(2016/09/15)のバージョンはv1.0.5です。
公開されて間もないため、かなりの頻度で更新されています。
バグフィックスや機能追加等の変更が入ると思います。

使い方

基本的にはデモ画面APIを見てください。

本記事ではそこを見ても分かりづらかった点を記載していきます。


ライブラリはzipをダウンロードした方が手軽です。(npmでも提供されています)
https://github.com/sarcadass/granim.js/releases
上記から最新版を落としておきます。

最小構成は以下の様になります。

  1. <canvas>タグを用意
  2. granim.jsを読み込む
  3. new Granim({});でグラデーションを設定する
...
<canvas id="canvas-basic"></canvas>

<script src="granim.js"></script>

<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    opacity: [1, 1],
    states : {
        "default-state": {
            gradients: [
                ['#F00', '#000'],
                ['#000', '#00F']
            ]
        }
    }
});
</script>
...

API補足

APIで分かりづらかったところを補足しておきます。

element

document.querySelector()で指定するセレクタの文字列を指定

name, elToSetClassOn

これらのプロパティはグラデーションの明るいか暗いかで何らかのスタイルの変更を行いたい場合に使用します。

Granim.jsのトップページがこれを使っています。
明るい時は文字を黒ベースに、暗い時は白ベースにスタイルを切り替えています。

Kobito.ZPkCyH.png

Kobito.a5WOpu.png

name

任意の文字列でOKです

elToSetClassOn

elementプロパティと同様にdocument.querySelector()で指定するセレクタの文字列を指定します。
未指定時は<body>に追加します。

何をしているのか

グラデーションの明るさを計算して、全体的なグラデーションが暗い状態なのか明るい状態なのかを計算します。
暗い状態だった場合はelToSetClassOnで取得したHTML要素に以下のクラスを追加します。
nameの値 + -dark

逆に明るい状態だった場合は以下の様に設定します。
nameの値 + -light

例)
nameにhogeを指定した場合は
hoge-dark, hoge-lightになります。

isPausedWhenNotInView

描画しているグラデーションがブラウザの画面外に行った時にアニメーションを止める機能です。
グラデーションの一部が再度ブラウザの画面内にはいると動き始めます。
※スクロールイベントを監視している

opacity

不透明度です。
opacityで指定する配列の長さはグラデーションの色数と一致させる必要があります。

例)gradientsに3色指定しているのでopacityも3つ

    opacity: [1, .5, 0],
    states : {
        "default-state": {
            gradients: [
                ['#485563', '#29323c', '#29323c'],
                ['#00c6ff', '#0072ff', '#0072ff']
            ]
        }
    }

stateTransitionSpeed

複数のStateを切り替える際のスピードです。
※Stateはグラデーションの1セットのことです。
デモ画面Interactive GradientsにStateを切り替えるサンプルがあります。

技術概要

元々<canvas>タグにはグラデーションを作るためのメソッドが用意されています。

内部的にはこれらの機能を細かい周期で呼び、<canvas>の中身を更新することでグラデーションのアニメーション化を実現しています。

あとがき

筆者は画面がガチャガチャ動くようなWebサイトは嫌いなのですが、色が変わるぐらいだとしつこくなくて良いと思います。

デモ画面のヘッダーで使われているようにワンポイントで使うのもありだと思います。
Kobito.mqLwjB.png

howdy39
heyinc corporate engineer https://techthetoaster.booth.pm/
https://howdy39.dev/
storesjp
インターネットビジネスの企画・開発・運営、マーケティング、プロモーション、コンテンツの企画・制作
https://about.stores.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした