Skip to content

housseynCheriet/SelectJs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 

Repository files navigation

SelectJs

Logo

This library is great for accomplishing common JavaScript tasks. provide many functions, whether the matter is related to select element DOM , animation ,events or effects

Include via [jsdelivr.com](https://www.jsdelivr.com/)
<script src="https://cdn.jsdelivr.net/gh/housseynCheriet/SelectJs/selectjs.1.js"></script>

1-Usage

Selecting DOM elements:

var elems=select('.div',2,3,'.div2',3,4);//Select the nth(2),nth(3) element from class ".div" and nth(3),nth(4) element from class ".div2"
elems.forEach(function( el ) {
    el.style.background="green";
})

Selecting DOM elements

More explanation clearly here: selectjs.vercel.app

2-What is in the library?

-Animation Look here:

  • There are 43 types of easing in animation (cubicbezier,linear,vibration,cubicin,...)

Selecting DOM elements

var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateY","rotateZ","rotateX"]},"left"],
from:[{transform:[100,9000,3000]},800],to:0,duration:10000}
var objectProperty2={typeAnimation:"vibration","property":[{backgroundColor:["rgbR","rgbG","rgbB"]},"borderRadius"],
from:[{backgroundColor:[10,250,10]},50],to:[{backgroundColor:[100,20,220]},0],vibrationStep:50,duration:10000}
var objectProperty3={typeAnimation:"elasticin","property":[{transform:["translateZ","rotateY","rotateZ"]},"left"],
from:[{transform:[-600,900,3000]},0],to:[{transform:[0]},700],duration:10000}
animate(select('#div'),objectProperty,objectProperty2,select('.cube'),objectProperty3)();
//Or select(animate(select('#div'),objectProperty,objectProperty2,select('.cube'),objectProperty3));  

Selecting DOM elements

More explanation clearly here: Animation

-Event triggering animation:

var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:800,to:0,duration:2000}
var objectProperty2={typeAnimation:"bounceout","property":"borderRadius",
from:50,to:0,duration:2000}
var objectProperty3={typeAnimation:"bounceout","property":[{transform:["translateX","rotateY","rotateZ"]},"left"],
from:0,to:500,duration:2000}
select("#event_here",animate(select('#div'),objectProperty,objectProperty2,select('.cube'),objectProperty3));//"e:x|y"  x:event,y:(false or true) is a useCapture,"e:click|false" is Default
 

Selecting DOM elements

More explanation clearly here: Event triggering animation

-Event triggering any function: DOM Event Listener

-Image Slider:

The explanation clearly here: Image Slider

-Drag and Drop Elements:

Drag’n’Drop algorithm
drag(d,w,string1,string2,string3)();
d (Obligatory):the element dragged.
w (Optional):Where to drag the element dragged.
string1,string2,string3 (Optional): the type of event ,("e:mousedown","e:mousemove","e:mouseup") is default.

More explanation clearly here: Drag and Drop

-Supported browsers:

Firefox 2+ Safari 3+ Opera 9.64+ Chrome (all versions) IE10, IE11, Edge

We love feedback!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published