Discovered public repositories for codrops in the GitHub catalog.
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.
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
Ever thought that clicking multiple checkboxes is not a very user-friendly task? Imagine rows and rows of junk mail that you'd like to select in your email app. This little script tries to ease that task by allowing a rapid and simple selection of multiple items by clicking, holding and moving over the desired items.
A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects.
A tutorial on how to create a off-canvas icon navigation with an animated border effect.
Some inspiration for transition effects for off-canvas navigations.
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.
An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.
An on scroll effect template that animates the sides of sections once they are in the viewport.
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.
Some inspiration for loading effects of grid items using CSS animations.
A set of experimental modal window appearance effects with CSS transitions and animations.
A responsive grid of anchors with icons and text.
A simple view mode switch that has two example layouts, a grid and a list.
A tutorial on how to create a mobile-friendly and responsive expanding search bar.
A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.
A tutorial on how to create some subtle and modern caption hover effects.
Some creative and modern button styles and effects for your inspiration.
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
A responsive multi-column form with example media queries for a flexible layout.
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr's touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.
An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.
A responsive product grid layout with some UI details for inspiration.
A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.
An experimental morphing device slideshow with CSS Transitions for showcasing responsive web design screenshots.
A showcase collection of various page transition effects using CSS animations.
A responsive vertical timeline layout with icons and example media queries.
A fixed background image scrolling layout with 100% height panels and smooth scrolling.
A fullscreen background slideshow with autoplay functionality.
A responsive grid layout for multiple items in a row that fill all the available width.
Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.
A simple automatic quotes rotator with progress bar and example media query.
A simple, nestable accordion with some examples of nesting levels and a media query.
A fixed vertical icon menu that adjusts its size for smaller screens.
A responsive horizontal drop-down menu inspired by the Microsoft.com menu.
A very simple 100% width slider that scales down to mobile.
A fluid content slider that will adjust in width and height depending on the size of its parent.
A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.
This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.
Codrops demo template. Wiki 👉
An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.
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.
A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.
A jQuery calendar plugin for creating flexible calendars.
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.