Handler Click/Scroll/Hover/Mousemove Events On Webpage – SuperEvents

Preview:

Description:

SuperEvents is an event handling JavaScript library which enables you to perform custom actions when an event is fired on the webpage.

Perfect for creating scroll & mouse triggered animations on any DOM elements within the document.

Supported Events:

• Click
• Scroll
• Hover
• Mouse move

Supported Actions:

• Callback
• From/To

How to use it:

1. Download the package and load the SuperEvents.min.js in the document.

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

2. Create a new SuperEvents instance and define the target/source elements as follows:

const instance = new SuperEvents({
      source: document.getElementById('source-id'),
      target: document.querySelectorAll('target-id')
});

3. Handle the click event.

instance.click();

4. Handle the scroll event.

instance.scroll({ 
  indicator: '90%', 
  duration: '60%', 
  debug: false 
})

5. Handle the hover event.

instance.hover();

6. Handle the mouse move event.

instance.mousemove();

7. Execute a callback when an event is fired.

instance.click().call(p => document.querySelector('.class').style.top(`${p}px`))

8. Animate an element from one state to another.

instance.mousemove().fromTo(scrollEventFrom = {}, scrollEventTo = {});

9. Apply an easing function to the animation.

instance.mousemove().fromTo(scrollEventFrom = {}, scrollEventTo = {})..easing({ 
  timing: 'linear', 
  duration: 0.5, 
  delay: 0, 
  cubicBezier: false
})

Changelog:

07/25/2020

• v0.2.2