懐かしすぎる！カーソルに追従するあのエフェクトを現在のJavaScriptで実装 -90's Cursor Effects

サイト構築 -JavaScript

Post on:2019年4月3日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

20年くらい前、ジオシティーズとか全盛期の頃でしょうか、個人ブログなどで必ずと言っていいほど設置されていたカーソルに追従するエフェクトを現在のJavaScriptで実装しなおした「90's Cursor Effects」を紹介します。

こんなの知らない！という人も多そうですね。

90's Cursor Effects -GitHub

スクリプトは現在用に実装されており、スマホなどのタッチデバイスでも動作します。アニメーションの動きや絵文字など、当時には実現できなかったものも使用されています。
雪が降って、ブラウザの枠に積もるのとかも懐かしいですね。

See the Pen
90's cursor fairy dust by Tim Holman (@tholman)
on CodePen.

See the Pen
90's emoji cursor by Tim Holman (@tholman)
on CodePen.

See the Pen
90's cursor bubbles by Tim Holman (@tholman)
on CodePen.

See the Pen
90's Halloween Cursor - Bats by Tim Holman (@tholman)
on CodePen.

See the Pen
90's cursor snowflakes by Tim Holman (@tholman)
on CodePen.

スクリプトは非常にシンプルで、懐かしさも感じられます。

/*!
 * Cursor Name.js
 * -- 90's cursors collection
 */

(function cursorName() {
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  
  function init() {
    bindEvents();
  }
  
  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    window.addEventListener('resize', onWindowResize);
  }
  
  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  
  function onMouseMove(e) {    
    cursor.x = e.clientX;
    cursor.y = e.clientY;
  }
  
  /**
   * Utils
   */
  
  // Applies css `properties` to an element.
  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }
  
  init();
})();