Tạo hiệu ứng chuyển ảnh tương tác 360 độ độc đáo

GIỚI THIỆU

Rollerblade là một plugin cho Jquery, cho phép bạn tạo hiệu ứng quay vòng hình ảnh, mang lại cảm giác xem 360 độ cho người xem, rất hữu dụng nếu bạn đưa vào banner của website, rất mới lạ và ấn tượng:

CÀI ĐẶT

Bạn có thẻ xem demo mình tạo trên codepen hoặc trên trang chủ của Rollerblade

1. THÊM VÀO GIỮA THẺ <HEAD></HEAD>

<link rel='stylesheet' href='http://www.iamapioneer.com/plugins/rollerblade/js/rollerblade/rollerblade.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='http://www.iamapioneer.com/plugins/rollerblade/js/rollerblade/rollerblade.js'></script>

2. HTML

<div id="laptop">
    <img class="rollerblade-img" src="http://www.iamapioneer.com/plugins/rollerblade/img/macbook/front.png">
</div>

3. JAVASCRIPT

$(function(){
    var rootPath = 'http://www.iamapioneer.com/plugins/rollerblade/img/';

    $("#laptop").rollerblade({
		imageArray : [
			rootPath + 'macbook/front.png',
			rootPath + 'macbook/front-side-right.png',
			rootPath + 'macbook/side-right.png',
			rootPath + 'macbook/back-side-right.png',
			rootPath + 'macbook/back.png',
			rootPath + 'macbook/back-side-left.png',
			rootPath + 'macbook/side-left.png',
			rootPath + 'macbook/front-side-left.png'
		],
		sensitivity : 50,
		drag : true
	});
});

4. PREVIEW

Bạn hãy dùng chuột, click và di chuột để quay ảnh, bạn sẽ xem được laptop 360 độ

See the Pen egrzs by Thanh Nguyen (@genievn) on CodePen.

CẤU HÌNH

Thuộc tính	Loại	Giá trị	Description	Mặc định
sensitivity	int	Số	Số càng nhỏ thì càng nhạy với chuyển động. Số này thể hiện khoảng cách (px) giữa mỗi lần thay đổi frame.	35
drag	bool	true/false	Nếu đặt false, ảnh sẽ chuyển động với bất kỳ di chuyển nào của chuột theo trục x.	true
auto	bool	true/false	Chế độ tự động, nếu đặt true thì ảnh sẽ tự chuyển động	false

Recent Post