Giter Site home page Giter Site logo

Codrops's Projects

dynamicgrid icon dynamicgrid

A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.

elasticcircleslideshow icon elasticcircleslideshow

A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot ["Mobile Commerce Interface"](https://dribbble.com/shots/2197260-Mobile-Commerce-Interface) by Bilal Mechairia.

elasticprogress icon elasticprogress

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

elastislide icon elastislide

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images

elastistack icon elastistack

ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.

exhibition icon exhibition

A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way.

expandingbarmenus icon expandingbarmenus

An experimental tab-like navigation that expands a content area when clicked.

expandingsearchbar icon expandingsearchbar

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

fancyletteranimation icon fancyletteranimation

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

filterableproductgrid icon filterableproductgrid

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

fourboxes icon fourboxes

A tutorial on how to recreate the four panel background image slideshow seen on Atelier Serge Thoroval's website.

fullscreenclipeffect icon fullscreenclipeffect

Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.

fullscreenform icon 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.

fullscreenlayoutpagetransitions icon fullscreenlayoutpagetransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

fullscreenoverlaystyles icon 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.

fullscreenscroll icon fullscreenscroll

A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.

fullwidthtabs icon fullwidthtabs

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

gammagallery icon 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.

geekyglasses icon geekyglasses

A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.

glitchperspective icon glitchperspective

A fun hover effect that shows a pixelated image with a glitch animation as seen on buōy's website.

glitchygrid icon glitchygrid

An experimental grid layout slideshow with a stack-like navigation and glitch effect.

gooeycursor icon gooeycursor

A gooey cursor background effect with SVG filters and CSS blend modes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.