Hiệu ứng scroller ảnh độc đáo với jQuery Plugin ALS

ALS – Any List Scroller là một jQuery Plugin được phát triển bởi  musings.it dùng cho việc tạo hiệu ứng cuộn danh sách cho các sản phẩm, ảnh, hay bất kì nội dung nào khác. Các bạn có thể tạo các hiệu ứng cuộn liên tục, vô tận và điều hướng giữa các items. Để hiểu rõ hơn về plugin này, các bạn có thể xem phần demo bên dưới, với những thuộc tính được ấn tình tùy theo từng demo.

Xem Demo | Download

HTML

Đầu tiên, chúng ta xây dựng khung chuẩn html như sau :

<div class="als-container" id="demo1">

  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

Đoạn html bên trên rất đơn giản , chỉ có thẻ <div>  cùng với hình ảnh được chèn vào từng phần tử <li>.

CSS

Kế tiếp, chúng ta sẽ định dạng chung cho scroller.

.als-container{
    position:relative;
    awidth:960px;
    margin:0 auto;
    z-index:0;
}

.als-viewport{
    position:relative;
    overflow:hidden;
    margin:0px auto;
}

.als-wrapper{
    position:relative;
    list-style:none;
}

.als-item{
    position:relative;
    display:block;
    text-align:center;
    cursor:pointer;
    float:left;
}

.als-prev, .als-next{
    position:absolute;
    cursor:pointer;
    clear:both;
}

Tùy theo kích thước hình ảnh hoặc kiểu hiệu ứng mà các bạn muốn sẽ có những cách định dạng css khác nhau. Đây là phần css dành cho demo 1 trong bài viết này.

/* specific  styling for #demmo1 */

#demo1{
    margin:40px auto;
}

#demo1 .als-item{
    margin:0px 5px;
    padding:4px 0px;
    min-height:120px;
    min-awidth:100px;
    text-align:center;
}

#demo1 .als-item img{
    display:block;
    margin:0 auto;
    vertical-align:middle;
}

#demo1 .als-prev, #demo1 .als-next{
    top:40px;
}

#demo1 .als-prev{
    left:200px;
}

#demo1 .als-next{
    right:200px;
}

jQuery

Việc sử dụng plugin rất đơn giản, đầu tiên là chèn thư viện jQuery và plugin vào.

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.als-1.7.min.js"></script>

Sau đó là chèn đoạn script khai báo như sau:

    $("#demo1").als({
        visible_items : 3,
        scrolling_items: 2,
        orientation:"horizontal",
        circular:"no",
        autoscroll:"no"
    });

Ở phần demo mình có đưa ra các khai báo thuộc tính tùy theo các demo, nên các bạn chỉ việc copy tùy theo nhu cầu của mình là được.

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

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster