snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices. snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that…
This is a responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included. Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.
This is a tutorial by Codrops on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. The technologies used…
ClassyCountdown is a jQuery plugin written by Marius Stanciu – Sergiu, a plugin that allows you to easily create clean circular countdowns. It is fully customizable and includes 12 themes, which can be modified and it uses HTML5 canvas for rendering the circles. This jQuery plugin is distributed under the MIT license. Enjoy!
LetterFx is a jQuery plugin to apply animated visual effects to text – letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $(“element”) and sequentially adding & removing transition-based CSS classes. Effects can be combined with the exception of transform-based and some position-based effects.
This is a secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other. A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. A good example I can think of is Disqus For Websites. A nice touch is to…
This is a great 3D Rotating Navigation tutorial by Codyhouse.(Claudia Romano).It is powered by CSS transformations.Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.
This is a collection of effects for revealing sharing buttons. You can use them in your portfolio, image galleries and more.Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag free (if you are running a modern browser).
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+) Including: – Inertia – Snapping to a grid, custom anchors or paths. – Cross browser and device, supporting the desktop and mobile versions of Chrome, Firefox and Opera as well as Internet Explorer 8+ – Interaction with SVG elements – Being lightweight and standalone (not yet another jQuery plugin)
Chosen is a library for making long, unwieldy select boxes more user friendly.Chosen automatically highlights selected options and removes disabled options. Chosen automatically sets the default field text (“Choose a country…”) by reading the select element’s data-placeholder value. If no data-placeholder value is present, it will default to “Select an Option” or “Select Some Options” depending on whether the select is single or multiple. You can change these elements in the plugin js file as…