懐かしすぎる！カーソルに追従するあのエフェクトを現在のJavaScriptで実装 -90's Cursor Effects
Post on:2019年4月3日
sponsors
20年くらい前、ジオシティーズとか全盛期の頃でしょうか、個人ブログなどで必ずと言っていいほど設置されていたカーソルに追従するエフェクトを現在のJavaScriptで実装しなおした「90's Cursor Effects」を紹介します。
こんなの知らない！ という人も多そうですね。
スクリプトは現在用に実装されており、スマホなどのタッチデバイスでも動作します。アニメーションの動きや絵文字など、当時には実現できなかったものも使用されています。
雪が降って、ブラウザの枠に積もるのとかも懐かしいですね。
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.
スクリプトは非常にシンプルで、懐かしさも感じられます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/*! * 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(); })(); |
sponsors
