Gradually: Trình diễn ảnh với MooTools và HTML5

Đăng bởi Neo trong mục Hướng dẫn vào 09 tháng 5, 2010 | Comments

Gradually là một plugin đơn giản của MooTools sử dụng HTML5 canvas để tạo các hiệu ứng chuyển động rất đẹp.

Bạn có thể tùy biến các giá trị: chiều rộng, chiều cao, thời gian chuyển ảnh, thời gian chờ xem ảnh.

Cách sử dụng

Gradually yêu cầu mã HTML rất đơn giản, bạn có thể lấy giá trị tử thẻ alt để cung cấp caption cho ảnh.

<div id="container">
  <ul id="gradually-container" class="gradually">
    <li><img title="image1 title" alt="image1 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image2 title" alt="image2 discription" src="images/demo2.jpg" width="650" height="275" /></li>
    <li><img title="image3 title" alt="image3 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image4 title" alt="image4 discription" src="images/demo2.jpg" width="650" height="275" /></li>
    <li><img title="image5 title" alt="image5 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image6 title" alt="image6 discription" src="images/demo2.jpg" width="650" height="275" /></li>
  </ul>
  <p class="information">&nbsp;</p>
</div>

Và bạn cần thêm vào header của trang HTML như sau:

<link rel="stylesheet" type="text/css" href="css/gradually.css" media="screen,print" />
<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.2-more.js"></script>
<script type="text/javascript" src="js/Gradually.js"></script>

Gọi Gradually lên làm việc:

window.addEvent("domready", function(){
	var container = null, sources = null;
	var options = {
		'panelHeight': 55,
		'panelWidth': 65,
		'interval': 3000,
		'duration': 1000,
		'zIndex': 9000,
		'onStart': function() {
			$("container").getElement("p.information").set("html", "now loading....");
		},
		'onPreload': function(images) {
			$("container").getElement("p.information").set("html", images.length.toString() + "loaded");
		},
		'onChange': function(image) {
			$("container").getElement("p.information").set("html", image.title + " : " + image.alt);
		}
	};
	
	var container	= $("gradually-container");
	var sources		= $("gradually-container").getElements("img");
	new Gradually(container, sources, options);
});

Bạn có thể xem demo hoặc tải về file js và demo ở đây (bản 1.0)

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter