A collection of high quality javascript tools and components you may copy-paste into your project without worrying about licensing.
Do note that these are not inteded to be polished for every use-case, I am simply implementing features when I need them.
Add a tooltip to anything using the data-tooltip html attribute.
Tooltips can appear on any html element, like this paragraph.
use the data-tooltip-pos attribute to specify a position. Legal values are top,
bottom, left and right
The tooltip will get the .tooltip-top,
.tooltip-bottom, .tooltip-left and .tooltip-right classes assigned
accordingly.
We use a progressive enhancement approach to masonries: you define a grid with using
grid-template-columns in CSS, we then create columns inside the grid and shuffle the
children around to create a nice masonry.
Simply wrap your grid with ks-masonry and it will automatically be converted if js is
enabled.
We implement shaders as a progressive enhancement.
Create an element with a background, then wrap it in ks-shader.
If the shader loads successfully the background of your element will be set to transparent so the
shader becomes visible.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis enim ad libero atque nesciunt placeat nostrum laborum mollitia optio totam vero, illum numquam, sunt adipisci corporis eaque error, quaerat necessitatibus!
A progressive enhancement to create menu's with a background element that smoothly moves to the selected menu
item. Simply wrap your menu in ks-fluentmenu, add an element with the
fluent-menu-cursor attribute and mark your menu items with the fluent-menu-item
attribute.
If you wrap your element in <ks-parallaxbase> it will define a --parallax-offset-center CSS property you can use to create parallax animations.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, alias quae ducimus asperiores odit laborum possimus beatae doloribus eveniet laudantium error repellendus! Similique nobis dolorem minima dolore laboriosam quia possimus.
Alternatively you can define the data-parallax="0.30" attribute with any number and we will apply a margin-top for that element automatically, calculated as --parallax-offset-center * [data-parallax].
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, ducimus!