CottonJS: A JavaScript repository from cotton123236

Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily.

Getting Started

Download

npm install cottonjs

Manual download

Download ZIP

Installation

ES modules

import Cotton.JS in your own project :

import Cotton from 'cottonjs'

Script tag include

Simply download and include with a script tag :

<script src="cotton.min.js"></script>

or using CDN :

<script src="https://cdn.jsdelivr.net/gh/cotton123236/cottonjs@latest/lib/cotton.min.js"></script>

Basic Usage

HTML

Create an element that you would like to animate.

<div id="cotton-cursor"></div>

CSS

Style your element.

There is some rules that you need to notice.

#cotton-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  background-color: #f9cabc;
  transform: translate(-20px, -20px);
}

JavaScript

Initialize Cotton in JavaScript.

const cottonCursor = new Cotton('#cotton-cursor')

See some demos.

Documentation

Parameters

Knowing more details about these parameters.

All available parameters :

const cottonCursor = new Cotton('#cotton-cursor', {
    scene: 'body',  // element
    models: '.cotton-model',  //elements
    cottonInitClass: 'cotton-init',
    cottonMovingClass: 'cotton-moving',
    cottonActiveClass: 'cotton-active',
    modelsActiveClass: 'model-active',
    speed: 0.125,
    centerMouse: true,
    airMode: {
        resistance: 15,
        reverse: false,
        alive: false
    }
})

Methods

Knowing more details about these methods.

All available methods :

const cotton = new Cotton('#cotton-cursor')

// call the method after initialization.
cotton.stop()
cotton.move()
cotton.updateModels()

// call the method in callbacks
const cotton = new Cotton('#cotton-cursor', {
    on: {
        enterModel() {
            this.stop()
            this.move()
            this.updateModels()
        }
    }
})

Callbacks

Knowing more details about these callbacks.

All available callbacks :

const cotton = new Cotton('#cotton-cursor', {
    on: {
        // callbacks defined on here.
        enterModel(cotton, model, event) {},
        leaveModel(cotton, model, event) {},
        enterScene(cotton, scene, event) {},
        leaveScene(cotton, scene, event) {},
        cottonMove(cotton, event) {}
    }
})

Mobile Device

Because there is no mouse on mobile devices, Cotton.JS will automatically detect user device and won't initialize when using mobile.

Others

Visit the website
Released under the MIT License.

cotton123236/CottonJS