SimplyScroll là một plugin rất linh hoạt trong việc tạo hiệu ứng cuộn (scroll) nội dung. Với plugin này, các bạn có thể cuộn nội dung theo chiều ngang, chiều dọc, cuộn về bên trái hay bên phải, có thể cho nó tự động chạy hoặc điều khiển bằng các nút bấm….
Với plugin này các bạn có thể dùng để tạo các chức năng cho web như liệt kê danh sách các khách hàng tiêu biểu (dựa vào logo của họ), hoặc liệt kê sản phẩm bán chạy….
HTML
Để tạo nội dung cuộn, trước hết chúng ta cần có nội dung cần định dạng như sau :
</pre>
<ul>
<ul>
<li><img alt="" src="image1.jpg" width="290" height="200" /></li>
<li><img alt="" src="image2.jpg" width="290" height="200" /></li>
<li><img alt="" src="image3.jpg" width="290" height="200" /></li>
</ul>
</ul>
<ul id="scroller">...</ul>
<pre>
JAVASCRIPT
Kế tiếp, chúng ta sẽ chèn thư viện jQuery và plugin simplyScroll vào, đồng thời kích hoạt hiệu ứng .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">// <![CDATA[
// ]]></script>
<script type="text/javascript" src="jquery.simplyscroll.js"></script><script type="text/javascript">// <![CDATA[
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll();
});
})(jQuery);
// ]]></script>
CSS
Chúng ta sẽ cần định dạng cơ bản cho hiệu ứng, tại đây các bạn có thể ấn định kích thước chiều ngang hay chiều dọc cũng như độ cao của nội dung cần cuộn (scroll).
/* Container DIV - automatically generated */
.simply-scroll-container {
position: relative;
}
/* Clip DIV - automatically generated */
.simply-scroll-clip {
position: relative;
overflow: hidden;
}
/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list {
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.simply-scroll-list li {
padding: 0;
margin: 0;
list-style: none;
}
.simply-scroll-list li img {
border: none;
display: block;
}
/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll {
width: 576px;
height: 200px;
margin-bottom: 1em;
}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {
width: 576px;
height: 200px;
}
/* Explicitly set height/width of each list item */
.simply-scroll .simply-scroll-list li {
float: left; /* Horizontal scroll only */
width: 290px;
height: 200px;
}
Và sau đây là danh sách các lựa chọn dành cho bạn khi sử dụng plugin này :
|
Property
|
Default
|
Description
|
|
customClass
|
‘simply-scroll’
|
Tên class cần định dạng
|
|
frameRate
|
24
|
Số frame trên giây
|
|
speed
|
1
|
Số lượng pixel di chuyển trên 1 frame
|
|
orientation
|
‘horizontal’
|
Nếu muốn cuộn chiều ngang thì đặt ‘horizontal’ còn chiều dọc thì đặt ‘vertical’
|
|
direction
|
‘forwards’
|
‘forwards’ hoặc ‘backwards’
|
|
auto
|
true
|
Tự động cuộn, nếu muốn tắt thì đặt giá trị là false
|
|
autoMode
|
‘loop’
|
auto = false, ‘loop’ or ‘end’ (end-to-end)
|
|
manualMode
|
‘end’
|
auto = false, ‘loop’ or ‘end’ (end-to-end)
|
|
pauseOnHover
|
true
|
Dừng lại khi rê chuột vào , thay đổi giá trị false thì ngược lại
|
|
pauseOnTouch
|
true
|
Hỗ trợ tính năng Touch
|
|
pauseButton
|
false
|
Tạo nút dừng (pause)
|
|
startOnLoad
|
false
|
Khởi tạo plugin khi window load
|
Giả sử chúng ta có các lựa chọn như sau :
<script type="text/javascript">// <![CDATA[
(function($) {
$(function() {
$("#scroller").simplyScroll({orientation:'vertical',customClass:'vert'});
});
})(jQuery);
// ]]></script>
Với lựa chọn này, thì chúng ta sẽ có hiệu ứng cuộn nội dung theo chiều dọc và tên class định dạng sẽ là vert.
Để hiểu rõ hơn về cách sử dụng plugin này các bạn có thể download toàn bộ mã nguồn về máy của mình để xem demo và hiểu cách sử dụng cho từng lựa chọn.