In this tutorial we will show you how to expand table rows using jQuery, HTML and CSS when user clicks on a row a box with some additional details will show and when user again clicks on that row box will hide.You may also like pricing table using HTML and CSS.
Inspiration for Letter Effects with Anime.js
Today we’d like to share some inspiration for letter effects with you. We wanted to explore some simple, creative animations for display typography and large headlines using anime.js. These kind of animations can really enhance a certain message; combining these effects with a fitting font and playing with transforms opens up a huge range of possibilities. We hope this set inspires you and gives you some ideas on how to use an animation library like anime.js for this purpose.
Obelisk.js : JavaScript library for Isometric Pixel objects
obelisk.js is a JavaScript library for building isometric pixel objects.
With the simple and flexible API provided, you can easily add isometric pixel elements like brick, cube, pyramid and slope in HTML5 canvas. Obelisk.js strictly follows pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.
Cesium : WebGL based JavaScript library for 3D globes and 2D maps
WebGL based JavaScript library for creating high-resolution 3D globes and 2D maps. It supports different map providers, weather simulations, and a ton of other complex features. Their Demos page has a big collection of community projects showcasing what Cesium is capable of, including a 3D map of all the building in New York and projects by NASA.
Waud.js : Web Audio Library with HTML5
Waud is a simple and powerful web audio library that allows you to go beyond HTML5’s <audio>
tag and easily take advantage of Web Audio API. It abstracts Web Audio API making it consistent and reliable across multiple platforms and browsers. It also falls back to HTML5 Audio on non-modern browsers where Web Audio API is not supported.
Features:
- Base64 Pack
- Audio Sprites
- iOS Audio Unlock1
- Auto Mute2
- Simple API
- Zero Dependencies
jQuery Time Lapse Painter Plus Editor
Time Lapse Painter product consists of jQuery Time Lapse Painter plugin (TLP plugin) that plays the effect and an editor called Time Lapse Painter Studio (TLP Studio). TLP Studio is the means by which the resources needed for the animation are created and the values to control it are set.
Features:
- Responsive behavior. TLP Plugin scales according to available width.
- Countless ways to animate your true color image, provided by TLP Studio.
- Transparent and semi transparent PNG images.
- Method and events that allow the effect to be used in trending slideshow plugins.
Line Maker : Animated Decorative Lines with Anime.js
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like ‘Uber Brand Experience’ and ‘Details’.Today we’d love to share a little library with you that allows to add decorative lines to a webpage. The inspiration for this plugin comes from various designs that contain the line as a focal part of their layout. We wanted an easy way for adding all kinds of lines with different thicknesses and colors, in vertical or horizontal direction, and animate them. For animating the lines we use Julien Garnier’s anime.js, the lightweight JavaScript animation library.