This content originally appeared on DEV Community and was authored by Raghav Yadav
hash.js
Link to the file
https://netopa.github.io/hash.js/hashtag_1.0.1.js
size: 1/6th of jQuery!
(when completed)
how to use
Just use it like jQuery :
hash('#id').hide(animationName);
hash('.class').show(animationName);
hash('by tag').animate(animation name, duration, delay);
Note: you must first enable animation by
hash().enableAnime();
Which enables it for all element on the page
Then enable it for an element
hash('.body').animate('jackInTheBox', "1s", "1s");//animation name, duration ,delay
We use animate.css engine for animating elements so the list could be a whole lot familiar...
list of animation inclues :
Attention seekers:
bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat
Back entrances:
backInDown
backInLeft
backInRight
backInUp
Back exits
backOutDown
backOutLeft
backOutRight
backOutUp
Back exits:
backOutDown
backOutLeft
backOutRight
backOutUp
Bouncing entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
Bouncing exits:
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
Fading entrances:
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight
Fading exit:
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft
Flippers:
flip
flipInX
flipInY
flipOutX
flipOutY
Lightspeed:
lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft
Rotating entrances:
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
Rotating exits:
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
Specials:
hinge
jackInTheBox
rollIn
rollOut
Zooming entrances:
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Zooming exits:
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
Sliding entrances:
slideInDown
slideInLeft
slideInRight
slideInUp
Sliding exits:
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
Adding an event listener:
hash('.body').on('click', function(){
alert('clicked');
})
Append text:
hash("body").append("someText")
Prepend text:
hash("body").prepend("someText")
Set or get attributes:
hash("body").attr("id") // returns body
hash("body").attr("id", "body") // sets I'd to body
Change the style of an element:
hash("body").css(property, value)
Example:
hash("body").css("background", "black") //changes the css to background: black;
Ajax: change the content of an element with remote file content:
hash("body").ajax("https://url-to-file.com/TXT.txt", "get") //the second one is the method
Set a cookie ?:
hash().setCookie("username", "hashtag", "session", "/"); //key, value, expires, path
Get a cookie by name:
hash().getCookie("username"); //returns "hashtag"
Add an element:
hash("body").addElm("element name", "id of elm")
// You can use the set attribute function to add attributes or to change text into the element
Configure local storage:
hash().storage(action, key, value)
// action list:
// "clear" clears the local storage
// "get". Gets the iten with specified key
// "set" set the key with the respective value
// "remove" remove the item with the specified key
Toogle hide and show:
hash(".element").toogle();
More features comming soon!!!
If you liked this article don't forget to hit a like.
This content originally appeared on DEV Community and was authored by Raghav Yadav
Raghav Yadav | Sciencx (2021-05-12T04:02:31+00:00) HASH.JS | A JavaScript library ( easy to use). Retrieved from https://www.scien.cx/2021/05/12/hash-js-a-javascript-library-easy-to-use/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.