10 Web front-end jquery developer Essential Source Components

1.conditioniz– probe Browser and conditionally load JavaScript and CSS

Conditioniz is a fast, lightweight (3KB) JavaScript tool that detects browsers and resolutions and conditionally loads JavaScript and CSS files. Conditioniz was rebuilt from its jQuery predecessor, and is now 50% faster. Add and CONDITIONIZR integrated scripting and style loading with the class name, allowing you to specify the scripts and styles you want to load for different browsers. Browser sniffing is often considered unreliable, and CONDITIONIZR is built to overcome this problem. The core function of CONDITIONIZR is to detect and implement the IE browser conditional loading scripts and styles. With this in mind, use a method like Google Analytics to detect your browser.

Online Demo

SOURCE download

2. Building circular navigation using CSS3 Transforms

In this tutorial I'll show you how to use CSS transformations to create circular navigation. The tutorial explains that implementing this style will involve some basic mathematical knowledge and create these styles with CSS transformations. But don't worry, the mathematical knowledge used here is really simple. The tutorial uses easy-to-understand language to introduce mathematical logic so that you can clearly understand the technology behind it.

Online Demo

SOURCE download

3.MixItUp: Filter and Sort plug-ins based on CSS3 & jquery

Mixitup is a lightweight, yet powerful JQuery plugin that provides beautiful animation filtering and sequencing of categorized and ordered content. Ideal for portfolio sites, galleries, image blogs, and any sort or ordered content. How does it work? Mixitup determines which content is hidden, displayed, or repositioned based on your filtering criteria, and then applies CSS3 transitions smooth animations to the new location. This is a very effective method, with the help of modern browser rendering capabilities, and avoid excessive use of jQuery for DOM operations.

Online Demo

SOURCE download

4. Impressive JQuery modal box plugin –ilightbox

Modal frames can draw the user's attention to the content, and there are many plugins on the network that implement such functions. Ilightbox is a new alternative to the JQuery Lightbox effect, which can display images, videos (youtube,viimeo,html5 videos, etc.) and other HTML content, with an optional full-screen mode. Gallery mode can display other items as thumbnails and allow browsing via keyboard, mouse wheel and touch events. With a retina-enabled skin that can be fully customized, Ilightbox can also be used as a better looking solution, replacing JavaScript hints and confirmation dialogs.

Online Demo

SOURCE download

5.fabric.js– simple and powerful JavaScript Canvas library

Fabric.js is a simple and powerful JavaScript Canvas library that provides an interactive object model on top of the HTML5 canvas element, along with a canvas-to-svg parser. With Fabric.js you can create and populate objects on the canvas, from simple geometries to complex graphics made up of hundreds of paths. You can easily move, scale, and rotate these objects with the mouse, modifying their properties (color, transparency, stacking order), and so on.

Online Demo

SOURCE download

6. Excellent jQuery text input box plugin

The automatic completion of text box input box and automatic prompt function can help the user to complete the operation quickly and is a very good product experience. Here we recommend a good jQuery text input box auto-completion & automatic prompt plugin, to help you easily add the input box automatic completion and automatic prompting function in the website. In this article, we use JQuery to implement the position of the smart input box cursor. It does not require images, is implemented using pure CSS3, and is real-time, accurate, which means that you will automatically adapt when you add or remove text. Implemented using the event broker mechanism, so don't worry about performance issues.

Online Demo

SOURCE download

7. Better use of jQuery drop-down Selector box plugin

Fancyselect This plugin is a better choice for the drop-down box feature in WEB development. Fancyselect is easy to use, as long as you bind any Select element on the page and call it on. Fancyselect (). By default, Fancyselect uses native selection features and styles on mobile devices.

Online Demo

SOURCE download

8. Ultra-smooth CSS transitions and transform animation effects plugin

Transit is a jQuery plugin for ultra-smooth CSS3 transitions and transform animations. With this plugin, you can easily achieve many effects such as translate, rotate, scale, and skew. Supported Browsers: IE + +, Firefox 4+, Safari 5+, Chrome + +, Opera 11+, and Mobile Safari.

Online Demo

SOURCE download

9.jQuery Flat shadow– Easy to achieve beautiful long shadow effect

The long shadow is actually extending the object's projection, the feeling is one kind of light illumination shadow, usually uses the angle to be 45 degrees the projection, has added a three-dimensional sense to the object. Long shadows rapidly evolve into popular design trends, and are often applied to objects in flat design scenarios. A more detailed introduction can read the "flat design of the latest trend – long Shadow" article, I believe that after you look at the shadow design has a deeper understanding.

Online Demo

SOURCE download

10. Use Sticky-kit to implement JQuery-based element pinning effects

Element pinning effects are applied much in Web pages, and more common usage scenarios have improved navigation and display ads. Sticky-kit is a very handy jQuery plugin that simplifies the creation/management of sticky elements with complex usage features. These features include: handling multiple fixed elements, enabling/Disabling the behavior depends on the position of the element in the viewport and the callback. It also has a function to recalculate dimensions, which simplifies the use of the browser when resizing.

Online Demo

SOURCE download

>> This article fixed link: http://www.i7758.com/archives/874.html

10 web Front-end jquery developer-Required Source components