BookBlock: A Content Flip Plugin
A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.
+ morePlayground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Unfolding 3D Thumbnails Concept
by Manoela Ilic
A 3D thumbnail view concept for image slideshows: the current image gets opened up and a thumbnail view unfolds in 3d.
+ more
Animated Responsive Image Grid
by Manoela Ilic
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
+ more
Old School Cassette Player with HTML5 Audio
by Manoela Ilic
Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.
+ more
Responsive 3D Panel Layout
by Manoela Ilic
A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects.
+ more
Experimental Page Layout Inspired by Flipboard
An experimental page layout that let’s you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.
+ more
Audio Slideshow with jPlayer
by Tyler Craft
Today we’ll share an audio slideshow with you, i.e. a slideshow that will be synced with some audio. We are using the open source audio framework jPlayer.
+ more
Direction-Aware Hover Effect with CSS3 and jQuery
by Manoela Ilic
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.
+ more
Parallax Content Slider with CSS3 and jQuery
by Manoela Ilic
A simple parallax content slider with different animations for each slider element and a background parallax effect.
+ more
3D Gallery with CSS3 and jQuery
Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.
+ more
Arctext.js – Curving Text with CSS3 and jQuery
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
+ more
With Rocking Letters into the New Year
by Team Codrops
2011 has been an exciting year for Codrops and we want to thank you for supporting us! We’ve learned a lot and it’s a privilege to us to be able to share our tutorials, experiments and thoughts with you. We hope that you have enjoyed our content and that it was inspiring and useful to you!
+ more
Experimental CSS3 Animations for Image Transitions
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only.
+ more
Fullscreen Image Blur Effect with HTML5
by Manoela Ilic
Today we want to share a neat image blur effect with you. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
+ more
Fullscreen Image 3D Effect with CSS3 and jQuery
Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.
+ more
Wave Display Effect with jQuery
by Manoela Ilic
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in a wave-like manner. When clicking on a thumbnail, we’ll “zoom” into the wave. Clicking again will make the large content area appear; here we will show some more content.
+ more
Elastislide – A Responsive jQuery Carousel Plugin
by Manoela Ilic
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.
+ more
Slicebox – A fresh 3D image slider with graceful fallback
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties.
+ more