Canvas Cursor Tracking

An attributes-only solution to add a fancy cursor tracking effect to any page of your website.

How it works

step #1
Copy the Canvas Cursor Tracking style and <script> and paste them into the <head> of your page
‍
<link href="https://cdn.jsdelivr.net/gh/francesco-castronuovo/canvas-cursor-tracking@1.0.3/style.css" rel="stylesheet" type="text/css">
<script async src="https://cdn.jsdelivr.net/gh/francesco-castronuovo/canvas-cursor-tracking@1.0.3/main.js"></script>
Copy Script
step #2
Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list of elements and options to create the canvas cursor tracking effect.
component
I want this
Section
Container
or
Div Block
to host the cursor tracking effect.
Add this attribute
Name
fc-cursor-tracking

Value
component

Description
Defines the Section, Container, or Div Block that will host the cursor tracking effect.
Option
stroke color
I want the stroke to have this color.
Add this attribute
Name
fc-cursor-tracking-stroke-color

Value
#4353ff

Description
Use this attribute to specify the color of the stroke. The value must be written by using the hexadecimal format - e.g., #4353ff. Two additional digits to specify color opacity are allowed - e.g., #4353ff3e
Default value is '#4353ff'.
Where?
This attribute should be applied to the "component" element.
Option
stroke thickness
I want the stroke to have this thickness.
Add this attribute
Name
fc-cursor-tracking-stroke-thickness

Value
4

Description
Use this attribute to specify the thickness of the stroke in pixels. The value must be an integer.
Default value is 4.
Where?
This attribute should be applied to the "component" element.
Option
stroke length
I want this to be the number of traits the stroke is composed of.
Add this attribute
Name
fc-cursor-tracking-stroke-length

Value
15

Description
Use this attribute to specify the number of traits the stroke will be made of. The value must be an integer.
Default value is 15.
Where?
This attribute should be applied to the "component" element.

Canvas Cursor Tracking

How it works

Copy the Canvas Cursor Tracking style and <script> and paste them into the <head> of your page

Implement in Webflow

Apply the attributes to the elements inside the page

ヒガンバナ