Open source projects by codrops

codrops/LineMenuStyles

An open collection of menu styles that use the line as creative design element.

☕CSS   ★551 stars   ⚠1 open issues   ⚭9 contributors   ☯about 1 year old  

codrops/SeatPreview

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.

☕HTML   ★916 stars   ⚠2 open issues   ⚭1 contributors   ☯about 1 year old  

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations.

☕CSS   ★1685 stars   ⚠11 open issues   ⚭5 contributors   ☯over 3 years old  

codrops/SelectInspiration

Creative styles and ideas for custom select elements.

☕CSS   ★398 stars   ⚠6 open issues   ⚭3 contributors   ☯over 2 years old  

codrops/ImageGridEffects

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.

☕HTML   ★150 stars   ⚠7 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/RainEffect

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

☕JavaScript   ★464 stars   ⚠4 open issues   ⚭2 contributors   ☯about 1 year old  

codrops/Slicebox

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.

☕JavaScript   ★332 stars   ⚠9 open issues   ⚭2 contributors   ☯over 4 years old  

codrops/ImageTiltEffect

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

☕HTML   ★470 stars   ⚠3 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/ResponsiveMultiLevelMenu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

☕HTML   ★596 stars   ⚠25 open issues   ⚭6 contributors   ☯almost 4 years old  

codrops/SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

☕CSS   ★1251 stars   ⚠11 open issues   ⚭5 contributors   ☯over 3 years old  

codrops/TextInputEffects

Simple styles and effects for enhancing text input interactions.

☕CSS   ★735 stars   ⚠4 open issues   ⚭1 contributors   ☯about 2 years old  

codrops/GridLoadingEffects

Some inspiration for loading effects of grid items using CSS animations.

☕HTML   ★426 stars   ⚠6 open issues   ⚭3 contributors   ☯over 3 years old  

codrops/HoverEffectIdeas

Some inspiration and modern ideas for subtle hover effects.

☕CSS   ★1198 stars   ⚠1 open issues   ⚭3 contributors   ☯over 2 years old  

codrops/CardStackEffects

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.

☕CSS   ★93 stars   ⚠0 open issues   ⚭1 contributors   ☯about 1 year old  

codrops/AnimatedHeader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

☕HTML   ★383 stars   ⚠7 open issues   ⚭4 contributors   ☯over 3 years old  

codrops/ZoomSlider

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

☕JavaScript   ★83 stars   ⚠2 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/SimpleDropDownEffects

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

☕HTML   ★432 stars   ⚠5 open issues   ⚭4 contributors   ☯about 4 years old  

codrops/InteractiveColoringConcept

A fun experimental coloring concept where a color droplet can be dragged from a palette and dropped on designated areas in a website mockup.

☕HTML   ★235 stars   ⚠1 open issues   ⚭1 contributors   ☯almost 2 years old  

codrops/CreativeGooeyEffects

Practical examples of how to apply the Gooey effect by Lucas Bebber

☕HTML   ★259 stars   ⚠2 open issues   ⚭2 contributors   ☯almost 2 years old  

codrops/AnimatedGridLayout

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

☕HTML   ★305 stars   ⚠3 open issues   ⚭3 contributors   ☯almost 2 years old  

codrops/FilterableProductGrid

A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.

☕HTML   ★91 stars   ⚠1 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/ModalWindowEffects

A set of experimental modal window appearance effects with CSS transitions and animations.

☕JavaScript   ★813 stars   ⚠19 open issues   ⚭1 contributors   ☯over 3 years old  

codrops/FullscreenForm

An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.

☕CSS   ★395 stars   ⚠4 open issues   ⚭1 contributors   ☯over 2 years old  

codrops/OffCanvasMenuEffects

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

☕CSS   ★490 stars   ⚠5 open issues   ⚭1 contributors   ☯over 2 years old  

codrops/CreativeButtons

Some creative and modern button styles and effects for your inspiration.

☕CSS   ★618 stars   ⚠2 open issues   ⚭2 contributors   ☯over 3 years old  

codrops/ClickEffects

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.

☕CSS   ★361 stars   ⚠0 open issues   ⚭1 contributors   ☯almost 2 years old  

codrops/ColorExtraction

Creating a color palette from images in a fun way using CSS Filters and Vibrant.js

☕CSS   ★126 stars   ⚠0 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/ProductComparison

A basic responsive product grid layout with comparison functionality and a slide-in effect.

☕CSS   ★72 stars   ⚠0 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/NaturalLanguageForm

An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.

☕CSS   ★260 stars   ⚠5 open issues   ⚭3 contributors   ☯over 3 years old  

codrops/Blueprint-VerticalTimeline

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

☕CSS   ★435 stars   ⚠2 open issues   ⚭2 contributors   ☯over 3 years old  

codrops/NotificationStyles

Various simple ideas and effects for unobtrusive notifications on a website.

☕CSS   ★844 stars   ⚠6 open issues   ⚭4 contributors   ☯over 2 years old  

codrops/PerspectivePageViewNavigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.

☕CSS   ★281 stars   ⚠3 open issues   ⚭3 contributors   ☯about 3 years old  

codrops/MorphingSearch

A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.

☕CSS   ★234 stars   ⚠1 open issues   ⚭1 contributors   ☯about 2 years old  

codrops/ElasticSVGElements

Adding elasticity with SVG shape animations for enhanced UI interactions.

☕CSS   ★240 stars   ⚠2 open issues   ⚭3 contributors   ☯about 2 years old  

codrops/GammaGallery

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

☕JavaScript   ★371 stars   ⚠13 open issues   ⚭2 contributors   ☯about 4 years old  

codrops/BookBlock

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

☕HTML   ★795 stars   ⚠35 open issues   ⚭10 contributors   ☯over 4 years old  

codrops/ElasticProgress

Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

☕JavaScript   ★780 stars   ⚠3 open issues   ⚭6 contributors   ☯over 1 year old  

codrops/CaptionHoverEffects

A tutorial on how to create some subtle and modern caption hover effects.

☕JavaScript   ★394 stars   ⚠4 open issues   ⚭1 contributors   ☯over 3 years old  

codrops/MultiLevelPushMenu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

☕JavaScript   ★636 stars   ⚠28 open issues   ⚭2 contributors   ☯over 3 years old  

codrops/Calendario

A jQuery calendar plugin for creating flexible calendars.

☕CSS   ★583 stars   ⚠20 open issues   ⚭11 contributors   ☯about 4 years old  

codrops/PageStackNavigation

A template for a simple page stack navigation.

☕CSS   ★109 stars   ⚠1 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/CSSProgress

A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.

☕CSS   ★70 stars   ⚠1 open issues   ⚭3 contributors   ☯over 1 year old  

codrops/PageLoadingEffects

Modern ways of revealing new content using SVG animations.

☕CSS   ★528 stars   ⚠0 open issues   ⚭1 contributors   ☯almost 3 years old  

codrops/ShazamButtonEffect

Demo for the tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.

☕JavaScript   ★37 stars   ⚠0 open issues   ⚭3 contributors   ☯about 1 year old  

codrops/RoomDisplay

An interactive room slideshow based on Bilal Mechairia's Dribbble shot ["Spaces - interaction prototype"](https://dribbble.com/shots/2275597-Spaces-interaction-prototype)

☕CSS   ★67 stars   ⚠0 open issues   ⚭1 contributors   ☯about 1 year old  

codrops/PricingTablesInspiration

A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.

☕HTML   ★56 stars   ⚠0 open issues   ⚭1 contributors   ☯about 1 year old  

codrops/MultiLevelMenu

A simple menu with multiple levels and an optional breadcrumb navigation and back button.

☕CSS   ★131 stars   ⚠5 open issues   ⚭1 contributors   ☯about 1 year old  

codrops/PagePreloadingEffect

A simple page preloading animation based on the effect seen on [Fontface Ninja](http://fontface.ninja/)

☕CSS   ★239 stars   ⚠1 open issues   ⚭1 contributors   ☯over 2 years old  

codrops/ThumbnailGridExpandingPreview

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

☕JavaScript   ★262 stars   ⚠26 open issues   ⚭3 contributors   ☯about 3 years old  

codrops/ProgressButtonStyles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

☕CSS   ★568 stars   ⚠0 open issues   ⚭1 contributors   ☯about 3 years old  

codrops/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.

☕CSS   ★436 stars   ⚠5 open issues   ⚭1 contributors   ☯almost 3 years old  

codrops/FullWidthTabs

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

☕CSS   ★147 stars   ⚠1 open issues   ⚭3 contributors   ☯almost 3 years old  

codrops/Blueprint-SlidePushMenus

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.

☕CSS   ★337 stars   ⚠5 open issues   ⚭1 contributors   ☯over 3 years old  

codrops/Animocons

Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"](https://dribbble.com/shots/2527200-Like-Animation) by Daryl Ginn.

☕JavaScript   ★980 stars   ⚠1 open issues   ⚭3 contributors   ☯11 months old  

codrops/Baraja

Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

☕JavaScript   ★346 stars   ⚠2 open issues   ⚭1 contributors   ☯about 4 years old  

codrops/DialogEffects

A collection of dialog effects using CSS (and SVG) animations.

☕HTML   ★222 stars   ⚠2 open issues   ⚭3 contributors   ☯about 2 years old  

codrops/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/).

☕JavaScript   ★546 stars   ⚠6 open issues   ⚭8 contributors   ☯almost 3 years old  

codrops/DragDropInteractions

Some inspiration for drag and drop interactions for the modern UI.

☕HTML   ★495 stars   ⚠2 open issues   ⚭1 contributors   ☯about 2 years old  

codrops/AnimatedSVGIcons

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.

☕JavaScript   ★447 stars   ⚠0 open issues   ⚭1 contributors   ☯about 3 years old  

codrops/ButtonComponentMorph

Inspiration for revealing content by morphing the action element.

☕HTML   ★548 stars   ⚠5 open issues   ⚭4 contributors   ☯over 2 years old