Experimental Page Layout Inspired by Flipboard
By Pedro Botelho on
An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard. ...
Playground
In this category you will find experiments, plugins and articles related to web development and programming. Here we present some new ideas and inspiration for solving problems and tackling challenges around web development.
Audio Slideshow with jPlayer
By Tyler Craft on
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. ...
Direction-Aware Hover Effect with CSS3 and jQuery
By Mary Lou on
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. ...
Parallax Content Slider with CSS3 and jQuery
By Mary Lou on
A simple parallax content slider with different animations for each slider element and a background parallax effect. ...
3D Gallery with CSS3 and jQuery
By Pedro Botelho on
Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. ...
Arctext.js – Curving Text with CSS3 and jQuery
By Pedro Botelho on
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 t ...
With Rocking Letters into the New Year
By Team Codrops on
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 tutoria ...
Experimental CSS3 Animations for Image Transitions
By Pedro Botelho on
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. ...
Fullscreen Image Blur Effect with HTML5
By Mary Lou on
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. ...
Fullscreen Image 3D Effect with CSS3 and jQuery
By Pedro Botelho on
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-dimension ...
Wave Display Effect with jQuery
By Mary Lou on
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 ...
Multi-level Photo Map
By Pedro Botelho on
This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each ...
Elastislide – A Responsive jQuery Carousel Plugin
By Mary Lou on
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-defi ...
Slicebox – A fresh 3D image slider with graceful fallback
By Pedro Botelho on
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 prope ...
J is for jCookies – HTTP Cookie Handling for jQuery
By Brian S. Reed on
jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while ...
Automatic Image Montage with jQuery
By Pedro Botelho on
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right imag ...
Image Zoom Tour with jQuery
By Mary Lou on
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on ...
Circular Content Carousel with jQuery
By Mary Lou on
Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on ...
Expanding Fullscreen Grid Portfolio
By Mary Lou on
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view m ...
Content Rotator with jQuery
By Mary Lou on
Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides ...
Vertical Sliding Accordion with jQuery
By Mary Lou on
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more informati ...
Sliding Background Image Menu with jQuery
By Mary Lou on
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all ...
Grid Navigation Effects with jQuery
By Mary Lou on
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We'll t ...
Sliding Letters with jQuery
By Mary Lou on
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is ...