Advertisement

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.

 

 

 

2. 動作環境

  • supported
  • supported
  • supported
  • supported
  • supported

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

 

 

 

3. 使い方

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

 

 

1. JSファイルのダウンロードと読込み

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

 

 

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

 

 

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

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

 

 

2. クラス名をつける

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

 

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

 

 

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

クラス名 グラデーション
.bg-granim-red  
.bg-granim-blue  
.bg-granim-green  
.bg-granim-yellow  
.bg-granim-pink  
.bg-granim-purple  
.bg-granim-mono  
.bg-granim-red2  
.bg-granim-blue2  
.bg-granim-green2  
.bg-granim-yellow2  
.bg-granim-pink2  
.bg-granim-purple2  
.bg-granim-rainbow  

 

 

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

クラス名 グラデーション
.bg-granim-red-rad  
.bg-granim-blue-rad  
.bg-granim-green-rad  
.bg-granim-yellow-rad  
.bg-granim-pink-rad  
.bg-granim-purple-rad  
.bg-granim-mono-rad  
.bg-granim-red2-rad  
.bg-granim-blue2-rad  
.bg-granim-green2-rad  
.bg-granim-yellow2-rad  
.bg-granim-pink2-rad  
.bg-granim-purple2-rad  
.bg-granim-rainbow-rad  

 

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

 

 

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

 

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

 

 

3. 注意点

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

 

 

最後に。

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

 

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