Asli

# Cursor Follower

Customization Reference
Edit options in 📄 HTML/js/app.js
Options object 🔧 app.options.cursorFollower
Component source 📄 HTML/js/components/CursorFollower.js
Component source (Gulp) 📄 SOURCE/components/cursorFollower/CursorFollower.js

# Default Options

window.app = {
  options: {
    // Other options...
    cursorFollower: {
      enabled: true,
      animationDuration: 0.25,
      hideIFramesHover: true,
      trailing: 0.2,
      elastic: 1.5,
      highlight: {
        includeClass: 'cursor-highlight',
        excludeClass: 'cursor-no-highlight',
        scale: '90px',
        opacity: 0.2
      },
      clickScale: 0.8,
      matchMedia: '(hover: hover) and (pointer: fine)',
      passiveListeners: true,
      useCSSVars: true
    }
  }
}

# HTML Markup

<div class="arts-cursor" data-arts-cursor-follower="cursor">
  <div class="arts-cursor__wrapper" data-arts-cursor-follower-element="wrapper">
    <!-- follower element -->
    <div class="arts-cursor__follower" data-arts-cursor-follower-element="follower"></div>
    <!-- arrows -->
    <div class="arts-cursor__arrows">
      <div class="arts-cursor__arrow arts-cursor__arrow_up material-icons keyboard_arrow_up" data-arts-cursor-follower-element="arrowUp"></div>
      <div class="arts-cursor__arrow arts-cursor__arrow_right material-icons keyboard_arrow_right" data-arts-cursor-follower-element="arrowRight"></div>
      <div class="arts-cursor__arrow arts-cursor__arrow_down material-icons keyboard_arrow_down" data-arts-cursor-follower-element="arrowDown"></div>
      <div class="arts-cursor__arrow arts-cursor__arrow_left material-icons keyboard_arrow_left" data-arts-cursor-follower-element="arrowLeft"></div>
    </div>
    <!-- label holder -->
    <div class="arts-cursor__wrapper-label">
      <div class="arts-cursor__label" data-arts-cursor-follower-element="toggleLabel"></div>
    </div>
    <!-- icon holder -->
    <div class="arts-cursor__wrapper-icon">
      <div class="arts-cursor__icon" data-arts-cursor-follower-element="toggleClass"></div>
    </div>
    <!-- loading indicator -->
    <div class="arts-cursor__wrapper-loading" data-arts-cursor-follower-element="loading">
      <svg viewBox="25 25 50 50">
        <circle cx="50" cy="50" r="24" fill="none"></circle>
      </svg>
    </div>
  </div>
</div>

# Customization

# 1. Disabling cursor follower

  • Option #1: Remove the cursor follower HTML markup from all the template pages.
  • Option #2: Set the enabled key to false in the component options.
cursorFollower: {
  enabled: false,
  animationDuration: 0.25,
  hideIFramesHover: true,
  trailing: 0.2,
  elastic: 1.5,
  highlight: {
    includeClass: 'cursor-highlight',
    excludeClass: 'cursor-no-highlight',
    scale: '90px',
    opacity: 0.2
  },
  clickScale: 0.8,
  matchMedia: '(hover: hover) and (pointer: fine)',
  passiveListeners: true,
  useCSSVars: true
}

# 2. Disabling "system loading" indicator

This is a separate option. It can be adjusted independently from the cursor follower options.

window.app = {
  options: {
    // Other options...
    cursorFollower: {
      // Cursor follower options...
    },
    /**
     * System loading mouse indicator
     */
    cursorLoading: false,
    // Other options...
  }
}

# 3. Customizing the cursor follower appearance

Use the following CSS rules for basic cursor follower customization. Note the different color presets for appearance on dark and light pages.

/* Colors */
.arts-cursor {
  --cursor-color: var(--color-accent-light-theme);
  --cursor-color-dark-theme: var(--color-accent-dark-theme);
  --cursor-border-width: 1px;
  --cursor-background-color: transparent;
  --cursor-background-color-dark-theme: transparent;
}

/* Default follower size */
.arts-cursor__follower {
  width: 60px;
  height: 60px;
  box-shadow: inset 0 0 0 var(--cursor-border-width, 1px) currentColor;
  background-color: var(--cursor-background-color, transparent);
}

/* Arrow size */
.arts-cursor__arrow {
  font-size: 24px !important;
  width: 24px;
  height: 24px;
}

/* Icon size */
.arts-cursor__icon {
  font-size: 28px !important;
  width: 28px;
  height: 28px;
}

/* Helping label font & style */
.arts-cursor__label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: 0;
}

# 4. Creating custom interactions with elements

Use the [data-arts-cursor-follower-target] attribute to apply a custom cursor interaction on the element. The attribute accepts an options object {}. See the example below:

<div data-arts-cursor-follower-target="{color: 'transparent', magnetic: 0.25, scale: 'current'}">...</div>

The supported options are:

{
  // Set cursor scaling.
  // Value can be set in pixels '120px' or as a multiplier like 1.7, 0.5, 0.0
  scale: '80px',

  // Apply magnetic effect (true or false)
  magnetic: true,

  // Hide native mouse cursor (true or false)
  hideNative: true,

  // Set custom text label
  label: 'My Label',

  // Toggle custom class on the element
  className: 'my-custom-class',

  // Set custom background color. RGBA, HEX codes, CSS vars are accepted
  background: 'blue',

  // Set custom text color. RGBA, HEX codes, CSS vars are accepted
  color: 'white',

  // Reveal cursor arrows. The accepted values are 'vertical', 'horizontal' or 'all'
  arrows: 'horizontal',

  // Adjust arrows distance from the cursor center.
  // Use only numbers here like 50, 60, 45
  arrowsDistance: 60,

  // Delegate the effect to the inner element instead
  // When true, it will look up for [data-arts-cursor-follower-delegated="true"]
  // and apply the effect into it if the element exists.
  delegate: false,
}

WARNING

When applying the magnetic effect, please make sure there are no transforms or transition rules set in the CSS of the target element.

# Example 4.1 Effect delegation

In the following example, we capture the mouse hover event and parse cursor options on the element with the [data-arts-cursor-follower-target] attribute. However, since it has the delegate: true option on, the resulting effect will be applied to the nested [data-arts-cursor-follower-delegated="true"] element.

<a class="icon-box" href="#" rel="nofollow" data-arts-cursor-follower-target="{delegate: true, magnetic: true, scale: 'current', hideNative: true}">
  <div class="icon-box__wrapper-icon" data-arts-cursor-follower-delegated="true">
    <div class="icon-box__icon icon-repeat"></div>
  </div>
  <div class="w-100"></div>
  <div class="icon-box__heading strong mt-3">AJAX Transitions</div>
</a>

← AJAX Transitions →