Bootstrap 対応！グラデーションアニメをクラス名ひとつで簡単実装！Granim.js

eye-1

ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。

今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。

デザインスパイスのひとつに、一度試してみてはいかがでしょう。
※ 改編はMITライセンスの下で行っています。

1. プラグインサンプル

使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。

ロゴと短文を使ったカード型レイアウト。

See the Pen qaxExO by ya90net (@ya90net) on CodePen.

一部透過させた画像の背景に使い、幻想的な効果を狙うことも。

See the Pen amqzRO by ya90net (@ya90net) on CodePen.

透過させた文字の背景に使うと、グッと注目を引きます。ここでは、当サイトのロゴを利用しています。

See the Pen QKQgAd by ya90net (@ya90net) on CodePen.

[browser]
モダンブラウザにて動作確認済み。
古いIEでは動作要チェックです。

上の透過画像を利用した例を見本に、くわしい使い方を見ていきましょう。
※ 透過画像の作り方は、こちらを参考にさせて頂きました。

まずGramin.jsをダウンロードします。
※クリックするとダウンロードが始まります。

ダウンロード後、ファイルを好きな場所へ移動しましょう。

次に、ダウンロードしたスクリプトを読み込みます。
場所はhead内やbody要素の最後部など好きなところでOKです。

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

※パスは環境に合わせて変更してください。

次に、要素へクラス名をつけていきます。グラデーションを実装する部分はこちら。

<div class="img">
	<img src="img/granim_sample.png" width="100%">
</div>

img要素を囲んでいるdivの背景にグラデーションを装着し、透明部分からグラデーションがのぞくようにします。

グラデーションに使えるクラスは以下の14種類 + パターンが異なる14種類です。

クラス名の最後に -rad をつけると、パターンが波紋状に変化します。

今回は bg-granim-blue2 を使ってみます。使用後のHTMLはこんな感じ。

<div class="img bg-granim-blue2">
	<img src="img/granim_sample.png" width="100%">
</div>

これでdivの背景がグラデーションになっているのが、画像の透過部分から確認できます。

See the Pen amqzRO by ya90net (@ya90net) on CodePen.

グラデーションがうまく現れない場合は、重なっている要素の背景色が透明かどうか、
z-index値を確認・変更してみてください。また、 reset.css を使用すると、動作する場合があります。

今回のグラデーションはクラス名をつけるだけで簡単に実装ができるので、これからHTML/CSSをはじめたいひとにもおすすめしたいスタイルです。

色や変化スピード、パターンなどお好みで設定したいときは、本家の使い方に挑戦してみてください。もとの機能は引き継いでいるので、JSファイルはそのまま利用することができます。