This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web.It’s pure CSS and font independent. Every Spinner is a fixed sized element with a pseudo element whose content is set to the parts of the spinner divided by \A to create line breaks. Then a stepped keyframe animation shifts the pseudo element up one line-height per step.
You’ve probably seen something similar to this before on car dealership sites. Pick a car, pick a color, pick wheel style, pick additional options etc. As you go through the image changes based on your selections. That’s a product builder! Product builders are useful shopping tools that allow potential customers to build an ideal version of a product by combining different options. At the end of this process the user is generally given an action…
A background image segment effect as seen on Filippo Bello’s Portfolio, employing the CSS clip-path property and powered by anime.js. This is a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer.…
We continue to find new tutorials for developers. Today’s tutorial is a fancy little lettering animation tutorial made with SVG and anime.js. It’s been created by Codrops. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” The trick for this effect is to have several layers of each letter. Every single stroke gets animated while adding a slight delay to each, creating the desired effect. Moreover, each letter…
Granim.js is a Javascript library to create fluid and interactive gradients animations.It’s less than 10KB and created by Benjamin Blonde. All the options are available to customize the states and the different gradients. Options: – Basic gradients animation – Radial gradients animation – Gradients with an image – Gradients with an image mask – Interactive Gradients
Mobi.css is a lightweight, flexible CSS library that focus on mobile.It’s only 2.8kb after gzip, less than Skeleton, Pure.css and Bootstrap v4, etc. Heavy use of flexbox, super flexible, less than 10 lines of custom style in the Homepage.It’s focused on mobile, show mobile pages in desktop with a sidebar on the left or right. Mobi.css provides two kinds of containers, container and container-side, as well as a simple but flexible grid system. Table of…
This is a simple decorative slideshow component with individual slide layouts and effects. by Codrops. The idea behind this slideshow is to have an individual layout for each slide, accompanied by a distinct effect. The images of each slide is meant to have a decorative purpose which could be suitable for an article header; or, for example, an ornamental quotes slideshow within an article. The animations for this slideshow are powered by anime.js by Julian…
Lightgallery.js is a full featured JavaScript image and video gallery. lightgallery.js comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use. lightgallery.js supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag. You also…
This is a simple slider, with morphing preview images animated using SVG properties developed by Codyhouse.What’s really powerful with SVG is the possibility to combine path animations with the clipPath element. You can add a touch of CSS transformations and you got a spicy recipe. Recommended Distorted Button Effects (SVG) 360 Degrees Product Viewer Gentelella – Free Bootstrap Admin Template
Due to the prevalence of too many pop-up and pop-under new windows opening up without user control, many Internet users now have pop-up blocking software and the latest web browsers also try to block these unwanted windows from opening too. With advancements in coding technologies, it is now possible to open up a pseudo-window inside an existing window, which is far less intrusive. There are created using jQuery Light Box Plug-ins. iziModal is an elegant,…