DEV Community

loading...
Cover image for HASH.JS | A JavaScript library ( easy to use)

HASH.JS | A JavaScript library ( easy to use)

Raghav9official
var Coder => (){ ”always” = true; }
Originally published at netopa.github.io ・2 min read


hash.js



Includes our in your HTML;


<script src="https://netopa.github.io/hash.js/hashtag_1.0.1.js"></script>
Enter fullscreen mode Exit fullscreen mode



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);
Enter fullscreen mode Exit fullscreen mode

Note: you must first enable animation by

hash().enableAnime();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode




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

Enter fullscreen mode Exit fullscreen mode

Adding an event listener:

hash('.body').on('click', function(){
   alert('clicked');
})
Enter fullscreen mode Exit fullscreen mode

Append text:

hash("body").append("someText")
Enter fullscreen mode Exit fullscreen mode

Prepend text:

hash("body").prepend("someText")
Enter fullscreen mode Exit fullscreen mode

Set or get attributes:

hash("body").attr("id") // returns body
hash("body").attr("id", "body") // sets I'd to body
Enter fullscreen mode Exit fullscreen mode

Change the style of an element:

hash("body").css(property, value)
Example:
hash("body").css("background", "black") //changes the css to background: black;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Set a cookie 🍪:

hash().setCookie("username", "hashtag", "session", "/"); //key, value, expires, path
Enter fullscreen mode Exit fullscreen mode

Get a cookie by name:

hash().getCookie("username"); //returns "hashtag"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Toogle hide and show:

hash(".element").toogle();
Enter fullscreen mode Exit fullscreen mode

More features comming soon!!!

If you liked this article don't forget to hit a like.

Discussion (0)