Thêm "trọng lực" vào website của bạn với jGravity

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

jGravity là một plugin của jQuery giúp thêm trọng lực vào tất cả các thành phần trên website của bạn (giống như 'Google Gravity').

Cách sử dụng

Tất cả những gì bạn cần là thêm đoạn mã $('body').jGravity(); để cho hiệu ứng thực thi. Bạn có thể gọi hàm jGravity với các phần tử khác nhưng sẽ tốt nhất với thẻ body. Phiên bản này được thử nghiệm với jQuery 1.7.2.

- Thêm jQuery và jGravity:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jGravity-min.js"></script>

- Gọi jGravity lên làm việc (cách gọi nâng cao):

$(document).ready(function() {
	$('div.jGravity').live('click', function() { // đặt sự kiện cho trọng lực xuất hiện
		$('body').jGravity({
			target: 'everything', // Ở đây bạn có thể lọc ra những phần tử có trọng lực, ví dụ 'div, p, span', 'h2' hoặc 'div#specificDiv', và đơn giản là 'everything' để áp dụng tất cả các phần tử trong thẻ body
			ignoreClass: 'ignoreMe', // Chọn các phần tử không áp dụng trọng lực (được đặt một class css cho trước)
			weight: 25, // Chọn các giá trị từ 1 tới 100 (mặc định là 25), bạn cũng có thể dùng giá trị 'heavy' hoặc 'light'
			depth: 5, // Chọn các giá trị từ 1 tới 10 (mặc định là 1), giúp ngăn việc phần tử nào đó phá vỡ cấu trúc (chưa hiểu lắm)
			drag: true // Cho phép người dùng kéo thả các phần tử
		});
	});
});

Test thử ở Firefox mới thì thấy không drag được (thay đổi kích thước trình duyệt thì các phần tử vẫn nhảy đi nhảy lại) nhưng IE10 thì chạy tốt, có thể plugin còn có lỗi trên Firefox, tuy nhiên đây vẫn là một plugin rất hay.

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