This is a handy snippet to let users customize a product directly from the products gallery, and add it to the cart.It’s beeb developed by Codyhouse. By showing customers a “quick add to cart” panel while they interact with a product preview, we can reduce the number of steps that separate a user from purchasing an item, and, potentially, increase our conversion rate. So this is what it does.As you see in the demo,you can…
This is a handy snippet to create responsive CSS breadcrumbs or multi-step indicators with ease.It’s been created by Codyhouse. Since both breadcrumbs and multi-step indicators share a similar structure (a simple list of items),this is a handy snippet to create and customize them with a preset of time-saving classes. The easiest way to understand how this resource works is by checking the source files: most classes can be combined, all possible combinations are covered in…
Stretchy is a good script for form control autosizing, one that worked on multiple types of form controls (inputs, textareas, even select menus).It’s been developed by Lea Verou You can also use it as a bookmarklet, to autosize form controls on an existing page, if a form is bothering you with its poor usability. Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event…
Have you ever wanted a drag and drop library that just works? That doesn’t just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn’t need you to do a zillion things to get it to work? Dragula handles dragging items very elegantly, includes smoothly applied events and has nice little touches such as quick deletion and ‘click firing’ when the button is…
This is a perfect tutorial by Codyhouse.It’an animated page transition effect with a slide-in content animation triggered by a side tabbed navigation.Basically hover effect turns into a loading bar, that finally expands with new content. When a user clicks one of the item in the side navigation, the triggerAnimation() function is executed. This function triggers the loading bar animation (loadingBarAnimation() function) and loads the new content (loadNewContent() function).
AcceCSS is a Sass Mixin that debugs & checks the accessibility of your designs.This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common coloblindness types. The AcceCSS mixin will work in any major evergreen brother : Google Chrome, Safari, Mozilla Firefox, IE (partial). “The API” is the few parameters you…
jQuery fontIconPicker is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, an Array or Object of icons or directly from a Fontello config.json or IcoMoon selection.json file. Go to the official plugin page for examples and documentation. jQuery iconPicker has been successfully tested on: Firefox (edge), Safari…
Animated Sign Up Flow is a pricing table that animates into a sign up form once the user selects a plan. In most cases, you’ll redirect your users to a sign up page. However, if your checkout process is quite simple, an alternative approach would be to animate the pricing table, and show the checkout form right away, in the same page. So here is a tutorial of animated sign up flow using Velocity.js …
This is a responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.It’s been created by Codrops. This Blueprint is a responsive Isotope-powered product grid layout where each grid item is a Flickity image slider. A small cart icon animation indicates that a product was added to the shopping cart. The product filter utilizes the Isotope filter functionality. Some example media queries are used to show how to make the layout adaptive. …
This is a mini-library of experimental page scroll effects. fancy effects that take place while the user is surfing through the sections of a web page. Some of the effects are quite extreme, but they can prove very useful if your goal is to create an immersive user experience. All animations have been created using Velocity.js. Please note that these effects are not visible on small devices, where the user can simply scroll through the…