【JS】マウスの動きに合わせて影の角度が変化する「shine.js」

 
テキストや要素に適用できるシャドーエフェクトです。マウスの動きに合わせて影を変化させたり、自動でアニメーションさせることもできるので、サイトにちょっとしたアクセントをつけたい時に使ってみたいエフェクトです。Jquery不要で使用できます。

shine.js

Githubに公開されてますのでshine.jsをダウンロードしてください。

使い方はダウンロードした「shine.js」を読み込ませ、htmlとcssを以下の通り記述します。

Java File
<script src="/js/shine.min.js"></script>
html
<h1 id="headline" class="demo-text">Shine Mouse-Follow Demo</h1>
CSS
.demo-text {
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100%;

  display: table;
  height: auto;

  color: #fcfcfc;
  text-transform: uppercase;
  text-align: center;

  font-size: 4em;
  font-weight: 800;

  letter-spacing: -0.02em;
  line-height: 1.2em;
}

適用させたいID(headline)に対してシャドーの設定をして完成です。

Java
<script type="text/javascript">
      var shine = new Shine(document.getElementById('headline'));

      function handleMouseMove(event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
      }

      window.addEventListener('mousemove', handleMouseMove, false);
</script>

Shine Mouse-Follow Demo


  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
  • 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
  • 直感的に操作できるサイトツアーを実装できるライブラリまとめ
  • 【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」
  • 【jQuery】いろんなエフェクトの背景画像カルーセル「Crosscover」
RELATED POSTS
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
  • コピペするだけで使えるCSSボタンジェネレーターまとめ
  • メニューのホバーエフェクト集「Inspiration for Menu Hover Effects」
  • 【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」