Codrops

Pinned Repositories

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.
Language:JavaScript1.5k 39 4176
BookBlock
A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
Language:HTML976 73 66264
DistortedButtonEffects
A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.
Language:CSS1.1k 36 7132
HoverEffectIdeas
Some inspiration and modern ideas for subtle hover effects.
Language:CSS1.6k 79 7314
ModalWindowEffects
A set of experimental modal window appearance effects with CSS transitions and animations.
Language:JavaScript1k 50 23238
PageTransitions
A showcase collection of various page transition effects using CSS animations.
Language:CSS2.2k 123 15448
ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
Language:JavaScript1.2k 39 9150
RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Language:JavaScript1.6k 48 14283
SeatPreview
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
Language:HTML1.2k 66 3194
SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Language:CSS1.6k 72 14247

Codrops's Repositories

codrops/CreativeButtons
Some creative and modern button styles and effects for your inspiration.
Language:CSS736 37 3139
codrops/IconHoverEffects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Language:CSS727 35 2178
codrops/BlockRevealers
Ideas for revealing content in a schematic box look as seen around the Web lately.
Language:HTML559 21 591
codrops/AnimatedHeader
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
Language:HTML447 31 10161
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.
Language:JavaScript439 45 16157
codrops/AnimatedGridLayout
A responsive, magazine-like website layout with a grid item animation effect when opening the content
Language:HTML398 22 3124
codrops/SmoothScrollingImageEffects
A small set of ideas on animating images and other elements while smooth scrolling a page.
Language:JavaScript334 9 372
codrops/GoogleNexusWebsiteMenu
A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.
Language:JavaScript327 35 5105
codrops/MenuHoverEffects
Some inspiration for menu hover effects.
Language:HTML311 8 073
codrops/SmoothScrollAnimations
Demo of a tutorial on how to add smooth page scrolling with an inner image animation
Language:JavaScript286 7 478
codrops/TileScroll
Scroll animations for image grids using Locomotive Scroll
Language:HTML218 9 170
codrops/PhotographyWebsiteConcept
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
Language:HTML193 9 265
codrops/ShapeHoverEffectSVG
Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.
Language:CSS191 15 158
codrops/CSSMarqueeMenu
A simple CSS based marquee effect for a menu.
Language:CSS166 7 144
codrops/SamsungGrid
Recreating the grid loading effect as seen on the Samsung Corporate Design Center website.
Language:JavaScript159 10 453
codrops/RotatedRevealers
Animated rotated overlays, or "reveal" elements for interesting page transition effects.
Language:JavaScript149 5 137
codrops/DistortedLinkEffects
Some ideas for decorative link distortion effects using SVG filters.
Language:JavaScript138 6 121
codrops/OutdoorsTemplate
An implementation of Gil Huybrecht “Outdoors” design project powered by layered CSS grids.
Language:JavaScript120 7 351
codrops/BackgroundScaleHoverEffect
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
Language:HTML118 4 231
codrops/RapidImageHoverMenuEffects
A set of hover effects on menu items with images.
Language:JavaScript113 6 429
codrops/CrossroadsSlideshow
An experimental slideshow with an inclined look with three slide previews and a content view on click.
Language:JavaScript103 5 134
codrops/CSSProgress
A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.
Language:CSS95 5 127
codrops/DistortedMenuLinkEffects
Some menu styles and ideas for decorative link distortion effects using SVG filters.
Language:HTML83 5 017
codrops/RapidLayersAnimation
A rapid layers animation of images as a splash intro or page transition on a website.
Language:JavaScript82 6 021
codrops/DiagonalThumbnails
A simple slideshow with tilted thumbnails and large titles that animate when navigating.
Language:HTML81 4 018
codrops/ImageDraggingEffects
A set of playful dragging effects for images using various techniques.
Language:JavaScript78 4 219
codrops/ScrollLoopMenu
A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
Language:JavaScript72 4 014
codrops/AnimateSVGTextPath
Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
Language:HTML56 3 019
codrops/GlitchyGrid
An experimental grid layout slideshow with a stack-like navigation and glitch effect.
Language:JavaScript40 6 013
codrops/TriplePanelImageSlider
A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.
Language:CSS2211