Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content. It’s been developed by Codrops. The demo has a couple of playful audio interactions that allow you to play music on instruments or simply make sounds by holding the mouse pressed and move around. All of the instruments, except the last set of small instruments, can be played using this interaction. The…
Here is an another bran new CSS spinners and loaders collection. This set has been developed by Nitish Kumar. Each of these CSS spinners and loaders is modular, customizable and developed using Single HTML Element Code. You are free to use CSSPIN Spinners and Loaders in Dev Projects. How CSS Structure Works? – CSS File named csspin.css consists CSS of all the spinners – CSS File named csspin-xxxx.css consists CSS of respective spinners
A simple template that lets you display events on a timeline, as well as organize them in groups – week days, conference rooms etc.. It’s been developed by Codyhouse guys When we check the schedule of a conference or the timetable of the classes or whatever you need the basic information. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to create a schedule…
Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height. It then stores the diff of the original text string in a hidden span element following the visible text. This means the original text remains intact. Advantages of Shave: – Maintains the original text after truncation – Does not require other libraries – Only requires a selector and a max height – Is…
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…