codrops Goto Github PK

repos: 329.0 gists: 0.0

Name: Codrops

Type: Organization

Blog: http://www.codrops.com

Codrops's Projects

shapesslideshow

An experimental slideshow using clip-path to create shape transitions between slides.

shazambuttoneffect

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

sidebartransitions

Some inspiration for transition effects for off-canvas navigations.

simpledropdowneffects

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

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.

sliceddualimagelayout

Some layouts with sliced background images, slideshow functionality and glitch effect.

slicerevealer

A reveal effect where animated slices cover and uncover an image

slideoutboxmenu

A details menu with boxes that slide out in an irregular grid https://tympanus.net/codrops/?p=35517

sliderpagination

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

slidingheaderlayout

A layout with a fullscreen header that slides up to reveal a content area with an image grid.

A responsive slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

smoothscrollanimations

Demo of a tutorial on how to add smooth page scrolling with an inner image animation

smoothscrollingimageeffects

A small set of ideas on animating images and other elements while smooth scrolling a page.

splitlayout

A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects.

stackmotionhovereffects

Experimental hover effects that reveal a stack of multiple colored cards behind the hovered item.

stackslider

An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

stapel

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

superfluidlayout

Experimental reveal animations on typographic elements

surfreport

A simple template of a weekly surf report with an animated SVG graph and a sliding content panel.

svgimagehover

Some SVG filters-powered distortion effects shown on images when hovering a link.

swatchbook

A tutorial about how to create a swatch book like component that let's you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.

textdistortioneffects

Some text distortion experiments using the Blotter.js library.

textinputeffects

Simple styles and effects for enhancing text input interactions.

textrepetitioneffect

An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.

textstyleshovereffects

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

texttraileffect

A text trail effect for a slideshow inspired by the "Abstract is hiring" Dribbble shot.

theodore

A little menu effect with an SVG overlay and an infinite background CSS animation.

thumbfulltransition

An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.

thumbhoversvgfilter

A simple hover effect for images using different SVG filters.

thumbnailgridexpandingpreview

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

codrops Goto Github PK

Codrops's Projects

Recommend Projects

Recommend Topics

Recommend Org