Awesome Code!

jQuery, CSS , HTML, PHP
458 Pins224 Followers
Dialog Effects

Inspiration for Dialog Effects

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.


Drag and Drop Interaction Ideas

This is a tutorial about drag and drop interaction from Codrops.Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that


Morphing Buttons Concept

MORPHING BUTTONS CONCEPT Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i. fullscreen overlay, modal window, sidebar and more.


Blueprint: Multi-Level Menu

A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.


Horizontal Timeline Coding Animation Code CSS HTML Javascript jQuery Navigation Resource Responsive Snippets Timeline Web Design Web Development


Inspiration for Item Transitions

Some inspiration and ideas for item transitions considering different scenarios and use cases including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.


Effect Ideas for Image Grids

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

Off-Canvas Menu Effects

Off-Canvas Menu Effects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.


Horizontal Slide Out Menu

A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.


Product Grid Layout

This is a responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the


Blueprint: Zoom Slider

Zoom Slider A simple content slider with depth-like zoom functionality for a predefined area in each slide.


Grid Item Animation Layout

A responsive, magazine-like website layout with a grid item animation effect when opening the content.

jquery.matchHeight.js screenshot

MatchHeight :: Set multiple columns in the website layout with ease. This jQuery plugin takes care of all the hurdles of calculating and matching column heights. Simply call the script and configure the output with a series of provided options.