(Any contructive criticism/feedback is welcome. Any negatives I haven't got time for. Life's too short. This is my first git repo so please help out where you can. I'm learning as I go so any positive suggestions are welcome!)
npm install jumpa --save
After NPM install, simply require Jumpa into a variable:
const Jumpa = require('jumpa');
Now Jumpa is loaded into your source code. It's really lightweight. Don't worry!
- Simply download or Git Clone the repo
- Navigate to the dist folder
- Choose between the regular or minified Jumpa.js
- Load file into your website
<script src="Jumpa.js"></script>
In your code, you can now call on Jumpa through a pre-defined Jumpa
variable
For Automatic mode simply add data-jumpa
and then the target data-jumpa-target=".target-jump-to-elem"
to the element that you want to be clicked on to perform the jump. Do this for each element you wish this to happen for and call:
Jumpa.automatic();
This method will take care of the rest for you. Easy peasy!
The default options so far are:
- Duration: (How long the animation between jumps should last)
- Easing: (What kind of animation should happen)
- Callback: (What custom stuff you want to happen after jump is finished)
let options = {
duration: 2000,
easing: 'linear',
callback: () => {
console.log('Custom callback function that activates once jump animation has finished.');
}
};
Jumpa.automatic(options);
Semi automatic allows you to set individual elements to jump instead of auto selecting every elem on page via data attributes. This way you can target custom elements via JS by setting the clickable jumpa elem and target individually:
let jumper = '.section-hero__jumper'; // Element you want to click on
let target = '.section-next'; // Elem you want to jump to
Jumpa.semiAutomatic(jumper, target, options);
Manual mode cuts out the event listeners and allows you to use the Jumpa scripts how you like:
let jumper = document.querySelector('.section-hero__jumper');
let target = '.section-next';
jumper.addEventListener('click', () => {
Jumpa.manual(target, options);
});