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

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