Các thư viện JavaScript đầy tiềm năng và cách dùng Đây là danh sách 8 thư viện JavaScript được tác giả bài viết JavaScript này cho là tiềm năng nhất trong việc phát triển và ứng dụng. Đi cùng với danh sách thư viện JavaScript này là vài ví dụ mẫu JavaScript đơn giản nhất để áp dụng các thư viện này. Vui lòng vào bài viết chi tiết để xem thêm.

Nhãn: 8, thư viện JavaScript, tiềm năng, cách dùng, ứng dụng

Miễn phí web hosting 1 năm đầu tại iPage

Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệ nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

A showcase of the most promising JavaScript Animation Library and Plugin around the Web and a short tips on how to use them to spice up your design.

1. Scripty2

Scripty 2

Scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces.

Sample Usage

Include this line in your HTML:

  1. <script src="prototype.scripty2.min.js" type="text/javascript"></script>  

The following line shows the code used in the scripty2 demo page.

//for the snake effect of the cards in the demo

      document.observe('cards:snake', function(){
        var d = 20;
        names.sortBy(Math.random).each(function(card, index){
            (272+(index-names.length/2)*d)+'px;left:371px;z-index:'+index, {
            propertyTransitions: {
              marginLeft: 'mirror', marginTop: 'bouncePast',
              left: 'swingFromTo', zIndex: zIndexTransition
          }).morph('margin-top:272px;left:'+(371+(index-names.length/2)*d)+'px', {
            propertyTransitions: { marginTop: 'easeInCirc', left: 'linear' },
            duration:1, delay:index/15
          }).morph('margin-top:'+(272-(index-names.length/2)*d)+'px;left:371px', {
            propertyTransitions: { marginTop: 'easeOutCirc', left: 'linear' },


Visit Scripty2's Site

2. jsAnim


jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.

Sample Usage

Include the following line of code in to your page.

<!-- jsAnim -->

<script type="text/javascript" src="/javascript/article/Most_Potential_JavaScript_Frameworks_with_Usages/jsAnim.js"></script>
<script type="text/javascript" src="/javascript/article/Most_Potential_JavaScript_Frameworks_with_Usages/main.js"></script>

Create your main.js file and paste the following code below.

var manager = new jsAnimManager();

aniMe = document.getElementById("animateMe"); = "relative";

var anim = manager.createAnimObject("animateMe");

anim.add({property: Prop.left, to: 500, duration: 2000});

Visit jsAnim's Site

3. Spritely


Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element.

Sample Usage

Here's a quick example to get you started... The following method animates one of the bird 'sprites' flying around this page. The 'sprite' is composed of three frames in a transparent png image, where each frame is side by side:

Now we simply need to create a div called 'bird', style it to exactly the correct size (180180 pixels in this case), and animate it with the sprite() method. The two options we need to use are 'fps' (frames per second) and 'no_of_frames', e.g. three frames for the above image:

$('#bird').sprite({fps: 12, no_of_frames: 3});

To make the mouse attract the sprite when you click the screen, use this:

  1. $('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();  
  2. $('body').flyToTap();  

The active() method makes this sprite the active sprite on launch otherwise a sprite with activeOnClick() becomes active only when you click it (or touch it using an iPhone/iPad).

The $('body').flyToTap() method watches for a click on the page at which point, after any current move is complete, the sprite moves to the clicked location. After a few second, if a random movement method has been applied (see below), it then moves away again.

Visit Spritely's Site

4. $fx()


$fx() is a tiny, self-contained Javascript library for animating HTML elements. It doesn't require any other library to function and [should] play well with any other libraries you are using (Prototype, JQuery, Moo tools, etc.)

$fx() allows you to alter any CSS property along a timeline, allowing animated effects to play in succession - i.e. in the order you want them to. It handles all of the headaches of timer controls and makes it easy to animate anything from simple, subtle animations.

$fx() also offers the ability to combine adjustments to CSS properties for combined effects, and allows you to set multiple callbacks, offering more flexibility.

Sample Usage

How to add and run single, simple effect

First you will need an element. Any element will do (let's assume it's: <div id="myDiv">). You then call $fx() and pass reference to the element as described above.


Then, you can add effects by calling to $fxAdd(...).

$fx('myDiv').fxAdd({type: 'fontSize', from: 12, to: 72, step: 1, delay: 20});

Then run it!

$fx('myDiv').fxAdd({type: 'fontSize', from: 12, to: 72, step: 1, delay: 20}).fxRun(null,-1);

Visit $fx() Site

5. moo.fx


moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework.

It's very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won't let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it.

Sample Usage

Code below is used for the draggable ball in the moo.fx's homepage.

		var ball = $('header').getElement('h1');
		var ballfx = new Fx.Styles(ball, {duration: 1000, 'transition': Fx.Transitions.Elastic.easeOut});
		new Drag.Base(ball, {
			onComplete: function(){
				ballfx.start({'top': 13, 'left': 358});

Visit moo.fx's Site

6. Raphael


Raphal is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphal uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphal's goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Sample Usage

View this animation demo here to see how awesome this framework is.

Code below is used in the demo which transforms the circle to ellipse from one place to another.

                // Ellipse
                (function () {
          , 90, 20).attr(dashed);
                    r.ellipse(140, 90, 20, 10).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 45});
                    var el = r.ellipse(40, 90, 20, 20).attr({fill: "none", stroke: "#fff", "stroke-width": 2}),
                        elattrs = [{ry: 10, cx: 140, rotation: 45}, {ry: 20, cx: 40, rotation: 0}],
                        now = 0;
                    r.arrow(90, 90).node.onclick = function () {
                        el.animate(elattrs[now++], 1000);
                        if (now == 2) {
                            now = 0;

View more demo in their homepage.

Visit Raphal's Site

7. Burst Engine

Burst Engine

The Burst Engine is an OpenSource vector animation engine for the HTML5 Canvas Element. Burst provides similar web functionality to Flash and contains a layer based animation system like After Effects. Burst uses a very light-weight JavaScript frame, meaning your animations will download un-noticeably quick and can be controlled using very simple JavaScript methods.

Sample Usage

Burst allows you to build complex animation chains very quickly and easily hook them into the view & control layers of any web application. Being able to chain, clone, ease and callback your animations allows the kind of script building flexibility found in jQuery.

  Burst.timeline("party", 0, 800, 1, false)
    .shape("balloon", "balloon3.svg", "svg", 0, 0, .5, 0)
    .shape("cake", "cake2.svg", "svg", 0, 0, 1, 0)
        .key(1, -320, 'easeInOutQuad')
        .key(200, 0)
        .key(800, -320)
        .key(100, 0, 'easeOutBounce')

  Burst.start("party;", function(){
      alert("Time for bed!");

Run this Code!

8. Canvas 3d JS Library (C3DL)

The Canvas 3D JS Libary (C3DL) is a JavaScript library that will make it easier to write 3D applications using WebGL. It provides a set of math, scene, and 3d object classes that makes WebGL more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work.

Visit C3DL's Site

Thanks for taking your time to read.

JavaScript theo ngày

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web