SuperEvents
JavaScript Scroll, Hover, Mouse move and Click effects library.
Table of Contents
Description
Often, when events happen, you may want to do something. SuperEvents allows you applying actions to target elements when events are detected in source element. SuperEvents right now can handel these events:-
- Click
- Hover
- Mouse Move
- Scroll
Installation
Download the latest version of SuperEvents from GitHub repository. Include SuperEvents.min.js to your HTML file.
<script src="/path/to/SuperEvents.min.js"></script>
And SuperEvents is ready to use!
Quickstart
First, you have to create an instance by passing the source element(s) and the target element(s) in object to SuperEvents, for example:-
var scrollInstance = new SuperEvents({
source: document.getElementById('any-element-id'),
target: document.querySelectorAll('.click-example-target')
});
Then you have to call the event function and pass the required parameters (some of functions does't required any parameters or you can keep it empty to use default values) for example for scroll event call this function:
var scrollEvent = scrollInstance.scroll({
indicator: '80%',
duration: '20%',
});
indicator and duration is the space where you can apply the action.
Then call the action function:-
var scrollAction = scrollEvent.fromTo({ color: '#00FF00' }, { color: '#FF0000' });
finally call the easing function like this way:-
scrollAction.easing({
timing:'linear',
duration: 0.3,
delay: 0.3,
cubicBezier: false
});
easing function is Optional
API Documentation
Event Functions
- scroll( params = {} ): {object}
- Description: The scroll event fires when the document view or an element has been scrolled.
- Parameters:-
params:
- name: params
- Description: The parameters
- type: object
- optional: true
- default:
{
indicator: '80%', //
duration: '20%', //
listener: 'load', //
debug: false // Display debug lines for scrolling postion and start and end ponts
}
- mousemove(): {object}
- Description: The mousemove function occurs when the mouse move over the target element.
- Parameters:- null
- click()
- Description: Execute a JavaScript when click the target element.
- Parameters:- null
- .mousemove()
- Description: The hover function occurs when the mouse pointer is over the selected element.
- Parameters:- null
Action Functions
- call( callback ): {object}
- Description: Scale in/out target element(s)
- Parameters: Boolean true, default value:- true (set it to false for scale out)
- fromTo( scrollEventFrom = {}, scrollEventTo = {} ): {object}
- Description: From and To action
- Parameters: Object {}, Object {}
- example:
event.fromTo(
{ color: '#FFF' },
{ color: '#999' }
)
Easing (Optional)
- easing( params = {} ): {object}
- Parameters: String '', Float 1, Boolean false
- example:
- Parameters: String '', Float 1, Boolean false
event.easing({
timing:'linear',
duration: 0.3,
delay: 0.3
});
Contributing
Want to get involved with SuperEvents? Here's how you can help.
Fork SuperEvents, clone your fork, and configure the remotes:
# Get code from repostery
git clone https://github.com/<your-username>/SuperEvents.git
# Change your way to cloned directory
cd SuperEvents
# Configure the remotes
git remote add upstream https://github.com/alzintani/SuperEvents.git
Install required packages npm install
then run npm run build
to build main files and documentation files.
Now you can run npm start
To display the documentation go to http://localhost:3001 from your browser.
Copyright and license
SuperEvents 2020 Hassan Matooq. Code released under the MIT license.