This is a fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects. It’s been developed by Codrops. The idea comes mainly from Forward Festival’s website and Tim Holman’s rad GifLinks project. Please keep in mind that this is a proof-of-concept with the aim to show a variety of effects. Some of these…
Simple loaders for your web applications using only one div and pure CSS. Usually it’s common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). _Gif_image loaders was great but using CSS we can avoid the image request, also it’s easier for customise and maintain and it’s more cool. Add the CSS file in your project and add the link…
This is a great set of Photoshop actions to add snow, rain and day to night effects to your photos.You can quickly add winter elements to your scenes with this set of actions. The download contains: – Snow Action – Rain Action – Day to Night Action – 21 Color Actions – 44 (High Res) Cloud/Fog/Mist brushes – Rain Splash Brush Each action is thoroughly tested across between 50 – 150 different photos to ensure…
This is a set of inspirational letter animations for display typography effects powered by anime.js. You know Anime.js is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. These kind of animations can really enhance a certain message; combining these effects with a fitting font and playing with transforms opens up a huge range of possibilities. If you want to impress your visitors then these…
Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine. Basically Tesseract.js is a javascript library that gets words in almost any language out of images. This library supports over 60 languages, automatic text orientation and script detection, a simple interface for reading paragraph, word, and character bounding boxes. Tesseract.js can run either in a browser and on a server with NodeJS. Image should be be sufficiently high resolution. Often, the same image…
This is a great tutorial to create a morphing dropdown that animates according to the size of its content. It’s first seen on Stripe.com website which is redesigned and Codyhouse guys has created the same navigation style. Basically, instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to make space for different content sizes. It works on all modern…
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…