codrops Goto Github PK

connectedgrid

Some ideas for simple on-scroll animations for connected grid items.

contentlayouttransition

An experimental layout transition where a stack of images animates to a gallery view, showing some more content.

coverpagetransition

A cover page transition based on Vitalii Burhonskyi's Dribbble shot.

creativebuttons

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

creativegooeyeffects

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

creativelinkeffects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.

crosshairdistortion

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

crossroadsslideshow

An experimental slideshow with an inclined look with three slide previews and a content view on click.

css-reference-issues

A repo for collecting issues and suggestions for the Codrops CSS Reference http://tympanus.net/codrops/css_reference/

cssglitcheffect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

cssmarqueemenu

A simple CSS based marquee effect for a menu.

cssprogress

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

cubesadventcalendar

A 3D Advent calendar with fun hover effects and background color animations

decorativeletteranimations

Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.

developerdesignerpagelayout

An experimental page layout concept with a developer/designer theme and a special effect.

diagonalslideshow

A slideshow with a diagonal look and a content preview

diagonalthumbnails

A simple slideshow with tilted thumbnails and large titles that animate when navigating.

dialogeffects

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

directionawarehovereffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

distortedbuttoneffects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.

distortedlinkeffects

Some ideas for decorative link distortion effects using SVG filters.

distortedmenulinkeffects

Some menu styles and ideas for decorative link distortion effects using SVG filters.

dotnavigationstyles

A set of subtle effects and styles for simple dot navigation.

doubleimagehovereffects

Some hover effects that use clip-path animations for revealing the same image again.

doubleslideshow

dragdropinteractions

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

draggabledualviewslideshow

A draggable slideshow with two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.

draggableelementsinteraction

A little playful interaction idea inspired by [Rally Interactive's Dribbble shot](https://dribbble.com/shots/2116525-Spectra-Modal). The idea is to add some bounciness to a draggable element and animate it depending on its position.

draggableimagestrip

A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.

draggablemenu

A draggable menu that shows a thumbnail preview of an image grid