[JS]さまざまな要素にかわいいシャドウをつけるスクリプト、しかも動くよ -Shine

Post on:2014年4月15日

h1, pなどで実装したテキストをはじめ、画像やパネルなど、さまざまな要素にかわいいシャドウをつけるスクリプトを紹介します。
スクリプトは単体で動作するので、jQueryなどの他のスクリプトは不要です。

シャドウは静止だけでなく、アニメーションにも対応しています。

サイトのキャプチャ

Shine.js
Shine.js -GitHub

Shine.jsのデモ

まずは、ページ自体がデモになっており、スクリプトの動作が楽しめます。

サイトのキャプチャ

Shine.js

シャドウのタイプはさまざまなものが揃っており、これはマウスを光源としてシャドウがアニメーションで移動します。

その他のデモは、ダウンロードファイルに含まれています。

デモのキャプチャ

マウスを光源とするものをはじめ、静止しているもの、自動でアニメーションするものなどが揃っています、

シャドウはテキストだけでなく、さまざまな要素に適用可能です。

デモのキャプチャ

パネルにもシャドウは適用できます。

Shine.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="../dist/shine.min.js"></script>
</head>

Step 2: HTML

テキストや画像、パネルなどの要素は、スクリプトで指定できるようclassなど付与しておくと便利です。

<h1 class="shine-text">テキスト</h1>
<img class="shine-image" src="image.png">
<div class=shine-panel">パネル</div>

Step 3: JavaScript

スクリプトで適用する要素を指定し、シャドウを設定します。

<script type="text/javascript">

  //要素の設定
  var shine = new Shine(document.getElementById('my-shine-object'));

  //シャドウの設定
  function update() {
    shine.light.position.x = window.innerWidth * 0.5;
    shine.light.position.y = window.innerHeight * 0.5;

    //シャドウの描画
    shine.draw();
  }
  update();

</script>

シャドウの描画は不透明度やブラーなども設定できます。

shine.config.opacity = 0.1;
shine.config.blur = 0.2;
shine.draw();

sponsors

top of page

©2024 coliss