Panache is a JavaScript helper library.
Download Panache and add it to your project. Ensure you use the compiled file in the dist
folder for a better web performance. And that's it. You are ready to go! Start manipulate the DOM in an elegant and effective way, without throwing a bunch of prototype extensions into the DOM.
<body>
<!-- html above -->
<script src="dist/panache.min.js"></script>
<script src="app.js"></script>
</body>
Use this library with panache
or $
. The $
is just an alias for panache.
Select the matched element from the document or context. It use selector method based on type of inserted selector.
panache(selector) // => collection
panache(selector, context) // => collection
Add one or more classes to each element.
panache.addClass(element, name) // => collection
Insert content after the matched element.
panache.after(element, content) // => collection
Perform an asynchronous HTTP request.
callback => function
panache.ajax(url, callback, method, async, data)
Animate on scroll with requestAnimationFrame.
callback => function
panache.animate(callback) // => collection
Insert the matched element to the end of the matched target.
panache.append(target, element) // => collection
Get the value of an attribute from the matched element or set one attribute for matched element.
panache.attr(element, name) // => attribute value
panache.attr(element, name, value) // => collection
Insert content before the matched element.
panache.before(element, content) // => collection
Create a copy of the matched element.
panache.clone(element) // => collection
Iterates over a collection with callback(index).
collection => array
callback => function
panache.each(collection, callback) // => collection
Remove all child nodes from the DOM.
panache.empty(element) // => collection
Fade element with opacity value set from current scroll value and speed. You must use animate()
to execute the scroll event.
speed => integer
panache.fade(element, speed) // => collection
Determine if the matched element has the given class.
panache.hasClass(element, name) // => boolean
Hide the matched elements.
panache.hide(element) // => collection
Determine if an element is in viewport.
panache.inview(element) // => boolean
Get the last element.
panache.last(element) // => collection
Move the matched element with set speed
on scroll. You can regulate the speed from -5
to 10
, where -5
is very slow and 10
is very fast. The default speed value is -2
and the default center mode is false
. You must use animate()
to execute the scroll event.
speed => integer
center => boolean
panache.move(element, speed, center) // => collection
Attach an event handler function for one or more events to the selected elements.
handler => function
panache.on(event, element, handler) // => collection
Get the parent of each element in the current set of matched elements.
panache.parent(element) // => collection
Insert element to the beginning of the matched target.
panache.prepend(target, element) // => collection
Wait until the DOM is ready before executing code.
handler => function
panache.ready(handler) // => collection
Remove the set of matched elements from the DOM.
panache.remove(element) // => collection
Remove one or more classes from each element.
panache.removeClass(element, name) // => collection
Rotate the matched element on scroll. You can regulate the speed
, You can regulate the speed, number higher than 1
increase the speed. To decrease the speed use a number less than 1
, for instance 0.5
. Negative speed number rotates the element anticlockwise. Positive speed number rotates the element clockwise. You must use animate()
to execute the scroll event.
speed => integer
panache.rotate(element, speed) // => collection
Scale the matched element on scroll. Negative zoom scales the element down. Positive zoom scales the element up. You must use animate()
to execute the scroll event.
zoom => integer
panache.scale(element, zoom) // => collection
Get the scroll top position.
panache.scrollPosition() // => integer
Get the scrolled part in percent.
panache.scrollValue() // => integer
Show the matched elements.
panache.show(element) // => collection
Get the siblings of the matched element.
panache.siblings(element) // => collection
Add or remove one or more classes from each element.
panache.toggleClass(element, name) // => collection
If you want to improve Panache, feel free to contribute. I will appreciate it, cooperation gives better results. You can do this by create a pull request.