codrops Goto Github PK
Name: Codrops
Type: Organization
Blog: http://www.codrops.com
Name: Codrops
Type: Organization
Blog: http://www.codrops.com
A grid layout with a magnetic hover effect and a content preview animation.
A hover animation for a menu with 3D letters and image effect.
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.
An experimental 3D card stack animation on scroll.
A landing page template with a featured content section and background sounds that change according to the view.
Demo for the tutorial on how to animate two SVG animals using only CSS (SCSS)
A tutorial on how to create a off-canvas icon navigation with an animated border effect.
recreation of the hover effect seen on the customer grid on Evervault.
Some ideas for interactive custom cursor animations using SVG filters.
An experimental slideshow that shows an animated SVG frame when transitioning between slides.
A responsive, magazine-like website layout with a grid item animation effect when opening the content
A template where one can switch between little image previews that are scattered around the page.
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
An experimental layout where image columns get animated when a menu item is clicked.
A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments.
A plugin that animates an artistic font using Segment, the SVG strokes animation library. By Luis Manuel.
Demo for the tutorial on how to animate an SVG menu icon based on Tamas Kojo's Dribbble shot hamburger menu and implemented Segment. By Luis Manuel.
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
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.
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.
Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.
An exploration of modern, line-style sound visualization powered by p5js and its p5.sound library.
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
A background color shift effect using a CSS blend mode and a multi-layer animation.
Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.
Ideas for revealing content in a schematic box look as seen around the Web lately.
A fullscreen background slideshow with autoplay functionality.
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.