In this tutorial we will see how we can simulate the behavior of a range input, with an elegant component. Fancy component to simulate a range input, based on this dribbble shot by Stan Yakusevich.
To code it, we will mainly use SVG to draw the paths, and anime.js to perform the animations.
REBOUNDGEN calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook’s Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters.
In this tutorial we’ll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.
ConfettiKit.js can easily generate random confetti Effects and Explosion with javascript. Easy to Use with html and javascript. Can Create random confetti effects like Happy birthday , celebrations and many more. you can change colors, angle ,rotation of confetti and many more configuration for creating confetti effects.
Features:
Woah.css is a css animation library for eccentric web developers.Woah.css has three different types of animations to choose from.
A simple slideshow that uses the CSS Glitch Effect for the slide transitions. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.
This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.
Blotter.js is a javascript API for drawing unconventional text effects on the web.
Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.
