Hướng dẫn Tìm hiểu và cách dùng Jquery Spritely

[PVS]

Tìm hiểu và cách dùng Jquery Spritely

Ngày nay, việc diễn hoạt cho các đối tượng trên website ngày trở nên rất cần thiết, đặc biệt là đối với các website mang tính chất sáng tạo. Trong bài này, mình sẽ hướng dẫn các bạn dùng Jquery Spritely để diễn hoạt cho các đối tượng như chim bay, mây trôi,….

Yêu cầu
– Để có thể thực hiện được những ví dụ phía dưới đây, bạn nên tìm hiểu về HTML & CSS, ngoài ra Jquery cũng là một phần quan trọng không thể thiếu được.
– Tuy nhiên, để có thể làm được các nhân vật hoạt động, thì photoshop, illustrator, hoặc bất kì phầm mềm đồ họa nào khác cũng là điều tất yêu nên biết.
– Các hình ảnh, javascript được đính kèm trong bài viết.

Giới thiệu về Jquery Spritely
jQuery Spritely được phát triển bởi Artlogic, với chức năng chính là giúp cho các nhân vật hoặc đối tượng chuyển động. Điểm đặc biệt khiển Spritely trỡ nên nổi bật nó nó hoạt động tốt trên hầu hết các trình duyệt hiện tại, và ngay cả cụ già IE 6 khó tính nó cũng hoạt động được.

​

Cách sử dụng
jQuery Spritely có 2 chức năng chính là .pan() và .sprite(). Với .pan(), bạn có thể tạo được những background chuyển động lặp đi lặp lại theo chiều ngang. Còn .sprite(), có thể giúp bạn làm cho các nhân vật diễn hoạt theo khung hình.

Giờ chúng ta sẽ đi vào sâu hơn từng cái bằng việc code html&css và jQuery

<style type="text/css">
body{
    background-image: linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, rgb(208,227,242)),color-stop(1, rgb(198,230,255)));
    font-family: Roboto;
}
 
article#cloud{
    background: url(../images/cloud.png) repeat-x;
    height: 100%;width:100%;
    z-index: 2;
}
</style>
<article id="cloud"></article>

Kết quả chúng ta đạt được sẽ hình.

​

Giờ chúng ta đưa thêm đoạn jQuery này vào nhé, giúp cho mây chuyển động.

jQuery(document).ready(function($) {
    $('#cloud').pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
});

Giải thích ý nghĩa các thuộc tính:

• fps: 30, // Frame trên giây, fps càng nhỏ thì chuyển động sẽ càng giật.
• speed: 2, // tốc độ di chuyển của vậy thể
• dir: ‘left’ // hướng chuyển động, left: phải>trái, right: trái>phải

Vậy là chúng ta đã hoàn thành chức năng .pan() rồi.

Tiếp theo, chúng ta sẽ đi tới chức năng .sprite().
Code html & css, chúng ta sẽ phát triển thêm vào dựa trên đoạn code html&css trên nhé. Đầu tiên, mình thêm section#birds-1 vào article#cloud mà chúng ta đã tạo ở trên.

<article id="cloud">
    <section id="birds-1"></section>
</article>

Và code css

section#birds-1{
    background:url(../images/birds-1.png) no-repeat;
    width: 194px;
    height: 156px;
    position: absolute;
    cursor: pointer;
}

Giờ chúng ta sẽ diễn hoạt cho con chim bằng .sprite()

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

Giải thích ý nghĩa thuộc tính trong đoạn code jQuery nhé.

• fps: 12, // Khung hình / giây
• no_of_frames: 3 // Số lượng khung hình trong bức ảnh

Đoạn này có lẽ sẽ khá rắc rối đây. Trước tiên bạn hãy nhìn vào hình phía dưới nhé.

​

Chúng ta có 3 hình con chim giống nhau, nhưng bạn chú ý phần cánh, phần này mình đã xử lý để nó giống như đang đập cánh vậy. Vậy .sprite() hoạt động bằng cách sẽ chạy từng hình trong bức hình trên để tạo sự diễn hoạt cho đối tượng, bạn có thể tượng tượng giống như phim nhựa lúc xưa vậy. Nhiều hình liên tiếp ghép lại và tạo ra sự chuyển động.
Giờ thì con chim của chúng ta đã bay được rồi đó. Tuy nhiên nó chỉ bay có một chỗ duy nhất thôi.
Chúng ta cần phải thêm vào đoạn này, để nó có thể tự do bay trong phạm vi thiết lập

$('#birds-1').spRandom({ // Bay tự do trong khoảng cách như dưới
          top: 70, // cao tối đa
          left: 100, // trái
          right: 200, // phải
          bottom: 340, // dưới
          speed: 4000, //  tốc độ đi chuyển giữa các điểm
          pause: 2000 // thời gian ngừng giữa các điểm
        });

Giải thích đoạn js trên nhé:

• top, left, right, bottom: giới hạn mà chim sẽ bay
• speed: tốc độ chuyển động giữa các điểm
• pause: thời gian ngừng giữa các điểm.

Nâng cao
Nếu chim chỉ bay không thì cũng chán phải ko bạn? Giờ nếu bạn thêm bộ thư viện jQuery Ui vào thì chúng ta có thể thêm chức năng kéo thả.

​

Giờ chúng ta thêm khác 1 chút, khi hover vào con chim, nó sẽ hiện lên đoạn text “Kéo em đi….” khi click chuột vào thì sẽ hiện lên đoạn text “Hãy kéo em đi thật xa….” và bỏ chuột ra thì sẽ trở lại đoạn text ban đầu.

Code html

<article id="cloud">
    <section id="birds-1">
        <p>Kéo em đi....</p>
    </section>
</article>

Thêm vào css

section#birds-1 p{
    padding: 3px 5px;
    font-size: 16px;
    border-radius: 3px;
    background: #fff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
section#birds-1:hover p{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

Thêm vào jquery

$('#birds-1').isDraggable({ // Nếu drag hoạt động, phải thêm Jquery Ui vào
            start: function() { // Khi click chuột vào đối tượng và kéo
                // Các sự kiện sẽ diễn ra
                $('#birds-1').fadeTo('fast', 0.7);
            },
            stop: function() { // Khi bỏ buôn chuột ra
                // Các sự kiện sẽ diễn ra
                $('#birds-1').fadeTo('fast', 1);
                $('#birds-1').find("p").html("Kéo em đi....");
            },
            drag: function() { // Trong quá trình kéo
                // các sự kiện sẽ diễn ra.
                $('#birds-1').find("p").html("Hãy kéo em đi thật xa....");
            }
        });

Dự án thực tế

Giờ chúng ta sẽ làm giống như demo gốc nhé. Chúng ta thêm nhiều chim vào, thêm vào phần content. Footer chúng ta sẽ dùng .pan() để làm sóng biển nhé.

Code html

<article id="cloud">
    <section id="birds-1">
        <p>Kéo em đi....</p>
    </section>
    <section id="birds-2"></section>
    <section id="birds-3">
        <p>Đưa thư cho izwebz nào !!!</p>
    </section>
</article>
<article id="content">
    <h1>izwebz</h1>
    <h2>take it easy</h2>
    <h3><a href="http://izwebz.com" target="_blank">Tutorial: jQuery spritely</a></h3>
</article>
<footer id="ocean"></footer>

Code css

body{
    background-image: linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, rgb(208,227,242)),color-stop(1, rgb(198,230,255)));
    font-family: Roboto;
}
 
article#cloud{
    background: url(../images/cloud.png) repeat-x;
    height: 100%;
    z-index: 2;
}
 
section#birds-1{
    background:url(../images/birds-1.png) no-repeat;
    width: 194px;
    height: 156px;
    position: absolute;
    cursor: pointer;
}
section#birds-1 p,
section#birds-3 p{
    padding: 3px 5px;
    font-size: 16px;
    border-radius: 3px;
    background: #fff;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
section#birds-1:hover p,
section#birds-3:hover p{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
section#birds-2{
    background:url(../images/birds-2.png) no-repeat;
    width: 97px;
    height: 78px;
    margin-left: 400px;
    position: absolute;
}
 
section#birds-3{
    background:url(../images/birds-3.png) no-repeat;
    width: 276px;
    height: 221px;
    margin-left: 250px;
    margin-top: 20%;
    position: absolute;
    cursor: pointer;
}
 
article#content{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: auto;
    top: 60%;
    color: #6abdc5;
    text-align: right;
    text-transform: uppercase;
}
 
article#content h1{
    font-size: 100px;
    margin-right: 50px;
    text-shadow:2px 2px 0 #FFF;
}
 
article#content h2{
    font-size: 40px;
    font-weight: normal;
    margin-right: 50px;
    text-shadow:1px 1px 0 #FFF;
}
article#content h3 a{
    color: #6abdc5;
    font-size: 15px;
    text-transform: none;
    text-shadow:1px 1px 0 #FFF;
    margin-right: 50px;
    text-decoration: none;
}
footer{
    background: url(../images/background.png) repeat-x top;
    width: 100%;
    height: 67px;
    position: absolute;
    bottom: 0; // cho footer xuống cuối cùng của website.
    overflow: hidden;
    z-index: 1;
}

Code Jquery

jQuery(document).ready(function($) {
    // Stuff to do as soon as the DOM is ready. Use $() w/o colliding with other libs;
    $('#cloud').pan({
        fps: 30, // Frame trên giây, fps càng nhỏ thì chuyển động sẽ càng giật.
        speed: 2, // tốc độ di chuyển của vậy thể
        dir: 'left' // hướng chuyển động, left: phải>trái, right: trái>phải
    });
    $('#ocean').pan({
        fps: 30, // Frame trên giây, fps càng nhỏ thì chuyển động sẽ càng giật.
        speed: 2, // tốc độ di chuyển của vậy thể
        dir: 'left' // hướng chuyển động, left: phải>trái, right: trái>phải
    });
    
    $('#birds-1')
        .sprite({
            fps: 12, // Khung hình / giây
            no_of_frames: 3 // số lượng khung hình trong bức ảnh
        })
        .spRandom({ // Bay tự do trong khoãng cách như dưới
            top: 70,
            left: 100,
            right: 200,
            bottom: 340,
            speed: 4000,
            pause: 2000
        })
        .isDraggable({ // Nếu drag hoạt động, phải thêm Jquery Ui vào
            start: function() { // Khi click chuột vào đối tượng và kéo
                // Các sự kiện sẽ diễn ra
                $('#birds-1').fadeTo('fast', 0.7);
            },
            stop: function() { // Khi bỏ buôn chuột ra
                // Các sự kiện sẽ diễn ra
                $('#birds-1').fadeTo('fast', 1);
                $('#birds-1').find("p").html("Kéo em đi....");
            },
            drag: function() { // Trong quá trình kéo
                // các sự kiện sẽ diễn ra.
                $('#birds-1').find("p").html("Hãy kéo em đi thật xa....");
            }
        });
    $('#birds-3')
        .sprite({
            fps: 12, // Khung hình / giây
            no_of_frames: 3 // số lượng khung hình trong bức ảnh
        })
        .spRandom({ // Bay tự do trong khoãng cách như dưới
            top: 70,
            left: 100,
            right: 200,
            bottom: 340,
            speed: 4000,
            pause: 2000
        })
        .isDraggable({ // Nếu drag hoạt động, phải thêm Jquery Ui vào
            start: function() { // Khi click chuột vào đối tượng và kéo
                // Các sự kiện sẽ diễn ra
               $('#birds-3').fadeTo('fast', 0.7);
            },
            stop: function() { // Khi bỏ buôn chuột ra
                // Các sự kiện sẽ diễn ra
                $('#birds-3').fadeTo('fast', 1);
                $('#birds-3').find("p").html("Đưa thư cho izwebz nào !!!");
            },
            drag: function() { // Trong quá trình kéo
                // các sự kiện sẽ diễn ra.
                $('#birds-3').find("p").html("Đưa thư đưa thư nào....");
            }
        });
    $('#birds-2')
        .sprite({
            fps: 12,
            no_of_frames: 3
        })
        .spRandom({
            top: 140,
            left: 500,
            right: 250,
            bottom: 140,
            speed: 3000,
            pause: 2000
        });
});

Chúc các bạn thành công.

Nguồn: izwebz.com​