Open source projects by codrops

codrops/LineMenuStyles

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

☕CSS   ★595 stars   ⚠2 open issues   ⚭9 contributors   ☯over 1 year old  

codrops/SeatPreview

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

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

codrops/PageTransitions

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

☕CSS   ★1764 stars   ⚠10 open issues   ⚭5 contributors   ☯about 4 years old  

codrops/SelectInspiration

Creative styles and ideas for custom select elements.

☕CSS   ★437 stars   ⚠7 open issues   ⚭3 contributors   ☯almost 3 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   ★158 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   ★531 stars   ⚠5 open issues   ⚭2 contributors   ☯over 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   ★341 stars   ⚠10 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   ★486 stars   ⚠3 open issues   ⚭1 contributors   ☯about 2 years 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   ★615 stars   ⚠27 open issues   ⚭6 contributors   ☯about 4 years old  

codrops/SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

☕CSS   ★1312 stars   ⚠11 open issues   ⚭5 contributors   ☯almost 4 years old  

codrops/TextInputEffects

Simple styles and effects for enhancing text input interactions.

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

codrops/GridLoadingEffects

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

☕HTML   ★444 stars   ⚠7 open issues   ⚭3 contributors   ☯almost 4 years old  

codrops/HoverEffectIdeas

Some inspiration and modern ideas for subtle hover effects.

☕CSS   ★1246 stars   ⚠2 open issues   ⚭3 contributors   ☯about 3 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   ★100 stars   ⚠1 open issues   ⚭1 contributors   ☯over 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   ★394 stars   ⚠7 open issues   ⚭4 contributors   ☯about 4 years old  

codrops/ZoomSlider

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

☕JavaScript   ★89 stars   ⚠2 open issues   ⚭1 contributors   ☯almost 2 years old  

codrops/SimpleDropDownEffects

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

☕HTML   ★433 stars   ⚠5 open issues   ⚭4 contributors   ☯over 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   ★243 stars   ⚠1 open issues   ⚭1 contributors   ☯about 2 years old  

codrops/CreativeGooeyEffects

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

☕HTML   ★263 stars   ⚠2 open issues   ⚭2 contributors   ☯over 2 years old  

codrops/AnimatedGridLayout

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

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

codrops/FilterableProductGrid

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

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

codrops/ModalWindowEffects

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

☕JavaScript   ★843 stars   ⚠18 open issues   ⚭1 contributors   ☯almost 4 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   ★420 stars   ⚠4 open issues   ⚭1 contributors   ☯almost 3 years old  

codrops/OffCanvasMenuEffects

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

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

codrops/CreativeButtons

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

☕CSS   ★628 stars   ⚠2 open issues   ⚭2 contributors   ☯about 4 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   ★377 stars   ⚠0 open issues   ⚭1 contributors   ☯over 2 years old  

codrops/ColorExtraction

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

☕CSS   ★129 stars   ⚠0 open issues   ⚭1 contributors   ☯about 2 years 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   ☯about 2 years old  

codrops/NaturalLanguageForm

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

☕CSS   ★271 stars   ⚠6 open issues   ⚭3 contributors   ☯about 4 years old  

codrops/Blueprint-VerticalTimeline

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

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

codrops/NotificationStyles

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

☕CSS   ★860 stars   ⚠5 open issues   ⚭4 contributors   ☯almost 3 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   ★289 stars   ⚠3 open issues   ⚭3 contributors   ☯over 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   ★243 stars   ⚠1 open issues   ⚭1 contributors   ☯over 2 years old  

codrops/ElasticSVGElements

Adding elasticity with SVG shape animations for enhanced UI interactions.

☕CSS   ★245 stars   ⚠2 open issues   ⚭3 contributors   ☯over 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   ★376 stars   ⚠14 open issues   ⚭2 contributors   ☯over 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   ★821 stars   ⚠37 open issues   ⚭10 contributors   ☯almost 5 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   ★800 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   ☯about 4 years old  

codrops/MultiLevelPushMenu

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

☕JavaScript   ★664 stars   ⚠30 open issues   ⚭2 contributors   ☯almost 4 years old  

codrops/Calendario

A jQuery calendar plugin for creating flexible calendars.

☕CSS   ★601 stars   ⚠20 open issues   ⚭11 contributors   ☯over 4 years old  

codrops/PageStackNavigation

A template for a simple page stack navigation.

☕CSS   ★122 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   ★72 stars   ⚠1 open issues   ⚭3 contributors   ☯over 1 year old  

codrops/PageLoadingEffects

Modern ways of revealing new content using SVG animations.

☕CSS   ★546 stars   ⚠0 open issues   ⚭1 contributors   ☯about 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   ★39 stars   ⚠0 open issues   ⚭3 contributors   ☯over 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   ★71 stars   ⚠0 open issues   ⚭1 contributors   ☯over 1 year old  

codrops/PricingTablesInspiration

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

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

codrops/MultiLevelMenu

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

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

codrops/PagePreloadingEffect

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

☕CSS   ★244 stars   ⚠1 open issues   ⚭1 contributors   ☯almost 3 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   ★279 stars   ⚠26 open issues   ⚭3 contributors   ☯over 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   ★581 stars   ⚠0 open issues   ⚭1 contributors   ☯over 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   ★457 stars   ⚠5 open issues   ⚭1 contributors   ☯over 3 years old  

codrops/FullWidthTabs

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

☕CSS   ★153 stars   ⚠1 open issues   ⚭3 contributors   ☯over 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   ★345 stars   ⚠5 open issues   ⚭1 contributors   ☯about 4 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   ★1090 stars   ⚠3 open issues   ⚭3 contributors   ☯over 1 year 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   ★357 stars   ⚠2 open issues   ⚭1 contributors   ☯over 4 years old  

codrops/DialogEffects

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

☕HTML   ★231 stars   ⚠2 open issues   ⚭3 contributors   ☯over 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   ★563 stars   ⚠6 open issues   ⚭8 contributors   ☯about 3 years old  

codrops/DragDropInteractions

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

☕HTML   ★509 stars   ⚠2 open issues   ⚭1 contributors   ☯over 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   ★463 stars   ⚠0 open issues   ⚭1 contributors   ☯over 3 years old  

codrops/ButtonComponentMorph

Inspiration for revealing content by morphing the action element.

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