6個新的jQuery技術來調劑你的設計內容
1. JQUERY TRANSIT
Super-smooth CSS3 transformations and transitions for jQuery
A very useful jQuery plugin that works the same way as the animate() method, but powered by CSS3 transitions. You get the benefit of smooth CSS3 transformations and transitions on any device. Transformation include: translate, rotate, perspective, scale, skew and so on.
How to Use it?
Just Use $('...').transition instead of jQuery’s $('...').animate.
Then choose one of the many transition effects available there: x(px) y(px) translate(x, y) rotate(deg) rotateX(deg) rotateY(deg) rotate3d(x, y, z, deg) scale(x, [y]) perspective(px) skewX(deg) skewY(deg)
2. The Wookmark jQuery plugin
lays out a series of elements in a dynamic column grid
The Woomark jQuery Plugin automatically arrange and creates a dynamic box grid layout that responds to your browser size. It is great for showcasing large amounts of content in a minimalistic and stylish way.
How to Use it?
It is very simple to setup:
1- Include the file in your website (after your include of jQuery)
<script type="text/javascript" src="jquery.wookmark.js"></script>
2- Run it on your content and adjust the options (container, offset, itemWidth)
$('#myContent li').wookmark({offset: 2});
3. Filtrify
Beautiful advanced tag filtering with HTML5 and jQuery
Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.
Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.
How to Use it?
1- Add jQuery, filtrify.js and filtrify.css to the <head> section of your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/fitrify.js"></script>
<link rel="stylesheet" href="css/filtrify.css">
2- Now,if you have a list of singers/bands and each one of them have a list of “genre” tags. Your HTML would have to look like this:
<div id="placeHolder"></div>
<ul id="container">
<li data-genre="pop, rock, british, classic rock"> The Beatles </li>
<li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li>
<li data-genre="alternative, electronic, female vocalists"> Björk </li>
<li data-genre="rock, alternative, grunge"> Foo Fighters </li>
<li data-genre="rock, classic rock"> Bruce Springsteen </li>
...
</ul>
4. Scrollorama
The jQuery plugin for doing cool scrolly stuff
Allows you to create transitions out of any numeric CSS property, Scrollorama is one of the quickest ways to develop your own scrolling website, without getting your hands too dirty with JavaScript.
By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.
How to Use it?
Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.
$(document).ready(function() {
var scrollorama = $.scrollorama({
blocks:'.scrollblock'
});
});
The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.
5. Magnifying glass for image zoom
Create a realistic magnifying glass using Jquery and CSS3
The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly.
Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.
6. Backbone.Notifier
Displaying and controlling UI notifications
Backbone Notifier is a powerful and flexible framework for displaying and controlling dialog notifications built on top of jQuery, Backbone.js and Underscore.js.
It currently has large number of options to customise the timing, style, size & position with even more features being added in the future. Includes styles that are fully customizable and don’t require extra CSS and can be extended thanks to smart modules architecture.
