90 & #8217; s efectos de movimiento del cursor en JavaScript puro

Vista prévia

Descripción

Este paquete proporciona los efectos de movimiento de cursor retro de seis 90 implementados en JavaScript puro.

Cursor effects included:

1. Bats (Demo)
2. Bubble (Demo)
3. Emoji (Demo)
4. Fairy Dust (Demo)
5. Ghost (Demo)
6. Snowflakes (Demo)

Funcionamiento

Descargue & descomprima el paquete.

Cargue un efecto de movimiento del cursor de su elección en el documento. Eso es todo.

<script src="js/batsCursor.js"></script>
<script src="js/bubbleCursor.js"></script>
<script src="js/emojiCursor.js"></script>
<script src="js/fairyDustCursor.js"></script>
<script src="js/ghostCursor.js"></script>
<script src="js/snowflakeCursor.js"></script>

También proporciona una plantilla JS que hace que sea fácil de crear sus propios efectos de cursor.

/*!
 * 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();
})();