Skip to content

Blueprint-VerticalTimeline

A responsive vertical timeline layout with icons and example media queries.

Updated

CircularProgressButton

Implementation of Colin Garvin's [submit button concept](http://dribbble.com/shots/1426764-Submit-Button)

Updated

JavaScript 47 9

ScatteredPolaroidsGallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Updated

TriplePanelImageSlider

A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.

Updated

MinimalForm

A simplistic form with inputs shown one at a time. Inspired by the form seen on the end of the [PageLanes website](http://www.pagelanes.com/).

Updated

JavaScript 21 2

GridGallery

A responsive grid gallery based on the [Google Chromebook getting started](https://gweb-gettingstartedguide.appspot.com/) guide gallery. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items.

Updated

FullWidthTabs

100% width tabbed content with some example media queries for smaller screens.

Updated

Calendario

A jQuery calendar plugin for creating flexible calendars.

Updated

BookPreview

A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

Updated

JavaScript 65 28

StackSlider

An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

Updated

JavaScript 477 106

BookBlock

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

Updated

JavaScript 144 50

DirectionAwareHoverEffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

Updated

FullscreenOverlayStyles

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.

Updated

SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

Updated

JavaScript 37 19

ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Updated

DotNavigationStyles

A set of subtle effects and styles for simple dot navigation.

Updated

JavaScript 61 12

ElastiStack

ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.

Updated

SwatchBook

A tutorial about how to create a swatch book like component that let's you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

Updated January 17, 2014

ShapeHoverEffectSVG

Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.

Updated

JavaScript 288 87

Elastislide

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images

Updated January 02, 2014

Something went wrong with that request. Please try again.