0.0.2 • Published 4 years ago
html-movement v0.0.2
movement
Movement is a simple JQuery library to animate DOM by scroll position.
Usage
Movement depends on JQuery, so the JQuery Js file and the movement Js File should be add on HTML doc. Place the code below on the page load and change the properties as needed.
$.movement({
properties: [
// Aimate DOM 1
{
selector: '#man',
start_time: 424,
end_time: 757,
name: 'left',
type: 'ease-out-back',
start_value: 20,
end_value: 50,
unit: '%'
},
// Animate DOM 2
{
selector: '#man',
start_time: 424,
end_time: 757,
name: 'bottom',
type: 'ease-out-back',
start_value: 110,
end_value: 240,
unit: 'px'
}// , Animate DOM n
]
});The move can be used with a single DOM element using the JQuery syntax, as in the code below. You can animate as many css properties as you need.
$('#man').movement({
properties: [
{
name: 'left',
type: 'ease-out-cubic',
start_value: 20,
end_value: 50,
unit: '%'
},
{
name: 'bottom',
type: 'ease-out-back',
start_value: 110,
end_value: 240,
unit: 'px'
}
],
start_time: 424,
end_time: 757
});Properties
| Name | Description |
|---|---|
| name | Name of css propertie to animate EX.: left, right, margin, etc |
| type | Animation effect to smoth the animation |
| start_value | Start value of css propertie |
| end_value | End value of css propertie |
| start_time | Value of screen position where the animation have to start |
| end_time | Value of screen position where the animation should stop |
| selector | css selector to determine the DOM element that will be animated |
| unit | Unit of css propertie EX.: %, px, pc, etc |
Animation smoth types
Movemnt suport the most commum smooth effects
- linear
- ease-in-quadratic
- ease-out-quadratic
- ease-in-out-quadratic
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quartic
- ease-out-quartic
- ease-in-out-quartic
- ease-in-quintic
- ease-out-quintic
- ease-in-out-quintic
- ease-in-sinusoid
- ease-out-sinusoid
- ease-in-out-sinusoid
- ease-in-exp
- ease-out-exp
- ease-in-out-exp
- ease-in-circ
- ease-out-circ
- ease-in-out-circ
- ease-in-elastic
- ease-out-elastic
- ease-in-out-elastic
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-bounce
- ease-out-bounce
- ease-in-out-bounce