Giter VIP home page Giter VIP logo

Codrops's Projects

3drestaurantmenu icon 3drestaurantmenu

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.

abovebeneath icon abovebeneath

A landing page template with a featured content section and background sounds that change according to the view.

animatedanimals icon animatedanimals

Demo for the tutorial on how to animate two SVG animals using only CSS (SCSS)

animatedbordermenus icon animatedbordermenus

A tutorial on how to create a off-canvas icon navigation with an animated border effect.

animatedgridlayout icon animatedgridlayout

A responsive, magazine-like website layout with a grid item animation effect when opening the content

animatedgridpreviews icon animatedgridpreviews

A template where one can switch between little image previews that are scattered around the page.

animatedheader icon animatedheader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

animatedimagepieces icon animatedimagepieces

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments.

animatedletters icon animatedletters

A plugin that animates an artistic font using Segment, the SVG strokes animation library. By Luis Manuel.

animatedmenuicon icon animatedmenuicon

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.

animatedresponsiveimagegrid icon animatedresponsiveimagegrid

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.

animatedsvgicons icon animatedsvgicons

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.

animatesvgtextpath icon animatesvgtextpath

Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.

animocons icon animocons

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.

arctext icon arctext

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.

arrownavigationstyles icon arrownavigationstyles

Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

audiovisualizers icon audiovisualizers

An exploration of modern, line-style sound visualization powered by p5js and its p5.sound library.

backgroundshift icon backgroundshift

A background color shift effect using a CSS blend mode and a multi-layer animation.

baraja icon baraja

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.

blockrevealers icon blockrevealers

Ideas for revealing content in a schematic box look as seen around the Web lately.

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.