[html5 + css3] Heapshot Gallery Slider

Nguồn: https://github.com/Jiwoks/heapshot

• Screenshot
• Cách sử dụng
  • Chèn code vào page
    PHP:

    <script src="jquery.js" type="text/javascript"></script>
<script src="js/jquery.imagesloaded.min.js" type="text/javascript"></script>
<script src="js/jQueryRotate.min.js" type="text/javascript"></script>
<script src="js/jquery.heapshot.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/heapshot.css"/>
  • Ảnh đặt trong class heapshot
    PHP:

    <ul class="heapshot">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
</ul>
  • Khởi tạo hiệu ứng
    PHP:

    jQuery(document).ready(function($) {
$('.heapshot').heapshot();
});
  • Tùy biến hiệu ứng
    PHP:

    jQuery(document).ready(function($) {
$('.heapshot').heapshot({
'indexStart' : 100,
'rotation' : 80,
'easing' : function(x, t, b, c, d){return c*t/d + b;},
'overflowparents' : true,
'autostart' : true,
'animationdelay' : 1500
});
});
    • indexStart: z-index của bức ảnh
    • rotation: góc quay của bức ảnh khi hiệu ứng xảy ra
    • easing: hàm di chuyển (nếu bạn có thể tự nghĩ ra 1 hàm di chuyển thì hãy sửa)
    • overflowparents: chính là overflow
    • autostart: giá trị là true thì tự trình diễn hiệu ứng
    • animationdelay: thời gian tạm ngừng khi di chuyển từng bức ảnh.

• Demo View demo
• Download
  Code:

  http://www.mediafire.com/download/zznfrcjrb55xpvr/

  (Pass: vietdesigner.net)