Hiệu ứng sản phẩm bay vào giỏ hàng sử dụng JQuery

Chả là hôm nọ có một bạn hỏi mình mà dạo này bản thân mình cũng bận quá không làm cho bạn ấy được. Thực ra mình cũng bảo bạn ấy search trên Google thiếu gì code người ta làm sẵn rồi. Khổ lỗi mình cũng đoán bạn ấy không biết nên search với từ khóa gì. Nếu mà search bằng từ khóa tiếng viết chắc thì tới ngày kia mới gặp được. Tìm kiếm từ khóa search nào cũng rất quan trọng thường thì bản thân mình thường chọn các từ khóa bằng tiếng anh để search. Nếu trong trường hợp này bạn search bằng từ khóa là 'fly to cart effect' hoặc 'fly to cart effect using JQuery' thì có lẽ rất nhiều. Hôm nay mình sẽ hướng dẫn các bạn những ai chưa biết làm hiệu ứng này.

Mô tả nó một chút: Khi người dùng click vào nút thêm vào giỏ hàng hoặc add to cart thì hình ảnh sản phẩm nó sẽ từ từ bay vào giỏ hàng. Khi nó bay vào giỏ hàng rồi thì hình ảnh đó sẽ từ từ biến mất.

Bạn có tưởng tượng được không. Khi đầu tiên mình trông thấy hiệu ứng này mình cũng đã khá thích thú nhưng hồi đó mình cũng chi copy của họ mà chưa hiểu tý gì. Thế là ngồi cặm cụi fix vì code của nó cũng khá rắc rối.

Thì đầu tiên bạn cần chèn vào hai thư viện Javascript là JQuery và JQuery UI.

1. Jvascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Tiếp theo là bạn cần chuẩn bị một cái giỏ hảng và một số sản phẩm.

2. HTML

<div id="fly-container">
    <div class="row">
        <a class="cart_anchor"><i class="fa fa-shopping-cart"></i></a>
    </div>
    <div class="row mt20">
        <div class="col-md-3 col-sm-6">
            <span class="thumbnail">
                <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="...">
                <h4>Product Title 1</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-info btn-add-cart right" > Add to cart</button>
                    </div>
                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6">
            <span class="thumbnail">
                <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="...">
                <h4>Product Title 1</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-info btn-add-cart right" > Add to cart</button>
                    </div>
                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6">
            <span class="thumbnail">
                <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="...">
                <h4>Product Title 3</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-info btn-add-cart right" > Add to cart</button>
                    </div>
                </div>
            </span>
        </div>
        <div class="col-md-3 col-sm-6">
            <span class="thumbnail">
                <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="...">
                <h4>Product Title 4</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                <hr class="line">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <p class="price">$29,90</p>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <button class="btn btn-info btn-add-cart right" > Add to cart</button>
                    </div>
                </div>
            </span>
        </div>
    </div>
</div>

3. Javascript

Chúng ta sẽ sử dụng hàm flyToElement(flyer,flyingTo) trong đó

• flyer: Phần từ sẽ bay vào giỏ hàng(hình ảnh sản phẩm)
• flyingTo: Đích đến (giỏ hàng)

function flyToElement(flyer, flyingTo) {
	var $func = $(this);
        
    // Nhân bản đối tượng(hình ảnh) sẽ bay vào giỏ hàng
	var flyerClone = $(flyer).clone();
    
	// Thiết lập đối tượng nhân bản này trùng với đối tượng thực tế 
    $(flyerClone).css({
		position: 'absolute',
		top: $(flyer).offset().top + "px",
		left: $(flyer).offset().left + "px",
		opacity: 1,
		'z-index': 1000
	}).appendTo($('body'));

    // Lấy về tọa độ của giỏ hàng
	var gotoX = $(flyingTo).offset().left;
	var gotoY = $(flyingTo).offset().top;

	// Hiệu ứng bay vào giỏ hàng
    $(flyerClone).animate({
		opacity: 0.4,
		left: gotoX,
		top: gotoY,
		awidth: $(flyingTo).awidth(),
		height: $(flyingTo).height()
	}, 700,
	function () {
        // Hiệu ứng rung lắc khi sản phẩm đã bay vào giỏ hàng
		$(flyingTo).effect("shake",function(){
            // Ẩn đối tượng sản phẩm bay vào giỏ hàng và delete nó
			$(flyerClone).fadeOut('fast', function () {
				$(flyerClone).remove();
			});
		});
	});
}

4. Tiếp theo chúng ta sẽ xử lý khi người dùng click vào button 'Thêm vào giỏ hàng'.

$(function(){
	$('.btn-add-cart').click(function(){
		var $_this = $(this);
		var itemImg = $(this).closest('.thumbnail').find('img').eq(0);
		 flyToElement($(itemImg), $('.cart_anchor'));
	});
});

5. CSS

<style>
	h4 {
		font-weight: 600;
	}
	p {
		font-size: 12px;
		margin-top: 5px;
	}
	.mt20{
		margin-top:20px;
	}
	.cart_anchor{
		font-size:60px;
		float:right;
		color:000;
	}
	.price {
		font-size: 30px;
		margin: 0 auto;
		color: #333;
	}
	.thumbnail {
		display: block;
		padding: 4px;
		margin-bottom: 20px;
		line-height: 1.42857143;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
		-webkit-transition: border .2s ease-in-out;
		-o-transition: border .2s ease-in-out;
		transition: border .2s ease-in-out;
	}
	.thumbnail {
		opacity:0.70;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}
	.thumbnail:hover {
		opacity:1.00;
		box-shadow: 0px 0px 10px #4bc6ff;
	}
	.line {
		margin-bottom: 5px;
	}
	@media screen and (max-awidth: 770px) {
		.right {
			float:left;
			awidth: 100%;
		}
	}
	span.thumbnail {
		border: 1px solid #00c4ff !important;
		border-radius: 0px !important;
		-webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.16);
		-moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.16);
		box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.16);
		padding: 10px;
	}
	.container h4 {
		margin-top:20px;
		margin-bottom:20px;
	}
	button {
		margin-top: 6px;
	}
	.right {
		float: right;
		border-bottom: 2px solid #0a5971;
	}
	.btn-info {
		color: #fff;
		background-color: #19b4e2;
		border-color: #19b4e2;
		font-size:13px;
		font-weight:600;
	}
</style>

6. Tổng kết

Nó cũng khá đơn giản phải không các bạn? Trên thực tế thì cái hiệu ứng này không có cũng được. Nhưng nếu có thì sẽ làm cho website của bạn nó phong phú hơn và lạ mắt hơn.

Một số demo khác mình sưu tầm.

1. http://www.discussdesk.com/fly-product-images-to-shopping-cart-using-jquery-effect.htm

2. http://outbottle.com/jquery-fly-to-basket-and-fly-from-basket/

3. http://demo.phpgang.com/fly-to-cart-using-jquery/