Include it in the
head
<script src="https://netopa.github.io/hash.js/hashtag_1.0.1.js"></script>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 ,delayWe 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 bodyChange 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 methodSet a cookie 🍪:
hash().setCookie("username", "hashtag", "session", "/"); //key, value, expires, pathGet 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 elementConfigure 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 keyToogle hide and show:
hash(".element").toogle();Vibrate:
hash().vibrate(200);image to text:
hash("#canvas").textToImg("some text");hash().read("message");MORE FEATURES COMMING SOON
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent