Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.
Best jQuery Grid Plugins & Tutorials with Demo
Masonry Hybrid is a multi columns layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid.
A set of responsive Bootstrap Portfolio And Lightbox contains bootstrap portfolio gallery, bootstrap lightbox gallery, bootstrap carousel with thumbnails and also support YouTube videos, vimeo video, self hosted videos etc with new features.
- 18 Light-boxes
- 7 Colors Schemes
- 6 Slider Portfolios
- 18 Simple Portfolios
- Built With Bootstrap 3.x
- 3 Background Colors Schemes
- 2,3,4,5,6 columns grid portfolios
- 100% Responsive And Mobiles friendly
- YouTube, Vimeo and Self hosted Videos Support
TutsMix has shared with us some cool CSS loading effects for grid images. You can use them on your portfolio, blog, or anywhere you want. The setup is quite simple. We use Normalize.css as an alternative to the traditional CSS reset, ZURB Foundation to create a responsive grid, Masonry to create a dynamic grid layout, imagesLoaded to check if the images have been loaded, and Infinite Scroll by Paul Irish to load more images and append them to the gallery.
Images grid jQuery plugin.Display first 6 images in grid view.Rest of images can be viewed in modal box.
Today we’d like to share some isometric grid styles with you. The inspiration comes from the Hotchkiss website where an isometric, scrollable grid is shown with some cool hover effects. In our first experiment we created a scrollable grid just like the one seen on that site, with some hover effects that involve random rotations. The second demo shows some ideas for “static” grids that are not scrollable but that serve more kind of a decorative purpose.
Currently the best option today to do this job is Masonry, but it’s very heavy and have dependency of jQuery. Please understand: this isn’t a problem is most cases, but in cases when perfomance and page weight matters, the best case is try other options: maybe pure CSS? It’s possible?
TwitTalk is a very simplistic use of the Twitter API. It encompasses both the search and user profile API to grab both text and media tweets. Right now, it will take the last x amount of tweets from users where the language is determined to be english(en) who have mentioned Kate Spade/Jack Spade or the tweets that are from Kate Spade and Company entities. The layout is built with JQUERY (Freewall.js).