Add Playful Emoji Trails To Your Cursor – Emojify.js

Emojify is a fun JavaScript library that creates a trail of emoji characters following your cursor. The emojis switch as you move your mouse and automatically fade away when you stop.

It works by tracking the mouse movements and generating emojis at the cursor’s position. When the mouse moves, a new emoji appears, with its size and opacity adjusted based on the distance moved.

The library uses a timeout to control the frequency of new emoji creation. Once the mouse stops moving for a specified duration (as defined by the duration option), the emoji fades out and is removed from the document.

How to use it:

1. Download Emojify and import it into your web page.

<script src="/path/to/emojify.min.js"></script>

2. Create a new Emojify instance with default settings:

window.emojify = new Emojify();

3. personalize the emoji trail by modifying the following options:

window.emojify = new Emojify({
  // options & defaults
  emojis: options.emojis || ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤧', '😷', '🤒', '🤕', '🤯', '🤠', '🥳', '😛', '😜', '😝', '🤪', '🤩', '🥳', '🤖', '👽', '💩', '🎃', '👻', '🎃', '👻', '🕷️', '🕸️', '🐛', '🐜', '🐝', '🐞'],
  random: true,
  duration: 500,
  delay: 15,
  size: '48px',
  zIndex: 9999,
  scaleOpacity: false,
  
});

Changelog:

09/01/2024

• changed from import to script tag