Loading Effects for Grid Items with CSS Animations & JavaScript

Loading Effects for Grid Items with CSS Animations & JavaScript

Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo. If you’d like to use something else or no library at all, you’ll have to remove the initialization from the script and adjust the selectors etc. That should be pretty straightforward.

Blueprint : Responsive Icon Grid with CSS3

Blueprint : Responsive Icon Grid with CSS3

A responsive grid of anchors with icons, text and some example hover transitions.A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

Blueprint : View Mode Switch with CSS3 & JavaScript

Blueprint : View Mode Switch with CSS3 & JavaScript

A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

tracking.js : Real Time tracking techniques by the Camera

tracking.js : Real Time tracking techniques by the Camera

The tracking.js brings to web elements tracking techniques of a real scene captured by the camera, through natural interactions from object tracking, color markers, among others, allowing the development of interfaces and games through a simple and intuitive API.

jQuery Color Swatches

jQuery Color Swatches

A jQuery plugin that turns a one-line div into a sweet color swatch(aka, color pallette).

jQuery Fullscreen Scroll Gallery

jQuery Fullscreen Scroll Gallery

A jQuery plugin help you to display fullscreen images with auto delay slideshow support.

Features:

  • Scrollable thumbnails navigation.
  • Auto delay slideshow.
  • Fullscreen image.

Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

Shuffle : jQuery Categorize, sort, and filter a responsive grid of items

jQuery Shuffle Plugin categorize, sort, and filter a responsive grid of items.

Features:

  • Uses CSS Transitions!
  • Responsive
  • Filter items by groups
  • Items can have multiple groups
  • Sort elements
  • Advanced filtering method (like searching)

Trip.js : jQuery plugin that Customize a Tutorial Trip easily

Trip.js : jQuery plugin that Customize a Tutorial Trip easily

Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with more flexibilities.

Dasky : jQuery Timeline Slider

Dasky : jQuery Timeline Slider

Dasky is a jQuery timeline slider,you can use it to show you products’s chagelog/loadmark, or loadmark of you team/life. And others what you want. It based on the power of css transforms and will fallback in old browsers who do not support it.

Features:

  • Fluid layout
  • Fullscreen or not
  • Auto play
  • Mousewheel control
  • Keybords control
  • Major browsers compatible and fallback to old browsers

GetEmPixels : Obtain an element’s em value in pixels using JavaScript

GetEmPixels : Obtain an element’s em value in pixels using JavaScript

Allows you to accurately obtain an element’s em value in pixels using JavaScript. No more blindly dividing by hard-coded values.