codrops Goto Github PK
Name: Codrops
Type: Organization
Blog: http://www.codrops.com
Name: Codrops
Type: Organization
Blog: http://www.codrops.com
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.
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.
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw
Adding elasticity with SVG shape animations for enhanced UI interactions.
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 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.
A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way.
An experimental tab-like navigation that expands a content area when clicked.
Grid item animation based on the Dribbble shot "Surf Project" by Filip Slováček.
An expanding menu animation with a cover unreveal effect in the background.
A tutorial on how to create a mobile-friendly and responsive expanding search bar.
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/).
A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.
Some ideas for interacting, previewing or just playing with folders on hover
A tutorial on how to recreate the four panel background image slideshow seen on Atelier Serge Thoroval's website.
A full image reveal effect with fancy thumbnail sliding.
Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
A fullscreen loop effect that shows a preview of images when hovering a menu item.
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.
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.
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
100% width tabbed content with some example media queries for smaller screens.
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.
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.
A fun hover effect that shows a pixelated image with a glitch animation as seen on buōy's website.
A slideshow that uses a CSS glitch effect for slide transitions.
An experimental grid layout slideshow with a stack-like navigation and glitch effect.
A gooey cursor background effect with SVG filters and CSS blend modes.
A gooey text hover effect using SVG filters
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.