This is a full-screen video presentation, that is resized and animated to become the content of a mobile device. It’s been developed by Codyhouse. It can be used to introduce a product or a feature of an app and turns into content for a mobile device. Before using this template you should consider 1) whether the video would be a great selling point or not, and 2) whether you expect many returning visitors, or the…
DateDropper is a powerful yet smallest jQuery UI Datepicker for oyur design projects. It’s been developed by Felice Gattuso. Basically DateDropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields. 18 languages are supported. This new version comes with a few more features like translation mode, new and improved UI design etc.. It’s really easy to implement into your projects: 1. Add datedropper libs on your HTML…
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…
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 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…
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…
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