Dodaj do koszyka – animacja lecącego zdjęcia

DODAWANIE DO KOSZYKA

Po kliknięciu na przycisk „Dodaj do koszyka” zazwyczaj zdjęcie produktu „leci” do koszyka. Bardzo łatwo jest osiągnąć taki efekt przy użyciu jQuery. Poniżej przedstawiam kod krok po kroku.

ANIMACJA DODAWANIA DO KOSZYKA – KOD

Kolejność:

1. Wszystkie akcje będziemy wykonywać po załadowaniu strony:
   

   $(document).ready(function() {
   	
   });

2. Wybieramy element, który po kliknięciu doda nam produkt do koszyka. W moim przypadku jest to napis „Dodaj do koszyka”. Niektórzy stosują również ikony koszyka, plusa itp. Mój napis to link o klasie: add-to-cart.
3. Deklarujemy, że akcja ma się rozpocząć po kliknięciu na przycisk o klasie: add-to-cart
   

   $(document).ready(function() {
   	$('.add-to-cart').on('click', function () {
   		
   	});
   });

4. Deklarujemy zmienne, które będą przechowywać obrazek i docelowy koszyk. Zmienna cart to koszyk sklepowy, czyli ten koszyk, który znajduje się w prawym górnym rogu – do niego będzie leciało zdjęcie. imgtodrag to zdjęcie, które należy pomniejszyć. W tym przypadku jest to pierwszy obrazek znajdujący się w tym samym elemencie co przycisk.
   

   var cart = $('.shopping-cart');
   var imgtodrag = $(this).parent().find("img").eq(0);

5. Teraz przechodzimy do właściwego kodu. Kopię zdjęcia ustawiamy w pozycji początkowej, tak jak oryginał.
   

   var imgclone = imgtodrag.clone()
   .offset({
   	top: imgtodrag.offset().top,
   	left: imgtodrag.offset().left
   })

6. W kolejnym kroku określamy jak ma wyglądać skopiowany obrazek. W moim kodzie ma on 150 px szerokości i 150 px wysokości, ma pozycję absolutną, jest w połowie przezroczyste oraz ma z-index: 100 – więc jest nad wszystkimi innymi elementami na stronie. Po czym wstawiamy go na stronę. Dopiero od tego momentu obrazek jest widoczny.
   

   .css({
   	'opacity': '0.5',
   	'position': 'absolute',
   	'height': '150px',
   	'width': '150px',
   	'z-index': '100'
   })
   .appendTo($('body'))

7. W ciągu sekundy (1000 ms) obrazek zmienia swoje położenie. Przenosi się z miejsca, w którym był do miesjca gdzie znajduje się koszyk, dodałam po 10 px w prawo do punktu docelowego i 15 px w dół, aby wywołać efekt wpadania do koszyka a nie obok niego. Można to sprawdzić tutaj.
   

   .animate({
   	'top': cart.offset().top + 10,
   	'left': cart.offset().left + 15,
   	'width': 15px,
   	'height': 15px
   }, 1000);

8. Na koniec należy ukryć obrazek. Wykonujemy kolejną animację: obrazek zmniejszamy do 0 i usuwamy go po zakończeniu animacji.
   

   imgclone.animate({
   	'width': 0,
   	'height': 0
   }, function () {
   	$(this).detach()
   });

DODAJ DO KOSZYKA – CAŁY KOD I PRZYKŁAD

Poniżej znajduje się cały kod.

$(document).ready(function() {
$('.add-to-cart').on('click', function () {
        var cart = $('.shopping-cart');
        var imgtodrag = $(this).parent().find("img").eq(0);
		var imgclone = imgtodrag.clone()
		.offset({
			top: imgtodrag.offset().top,
			left: imgtodrag.offset().left
		})
		.css({
			'opacity': '0.5',
			'position': 'absolute',
			'height': '150px',
			'width': '150px',
			'z-index': '100'
		})
		.appendTo($('body'))
		.animate({
			'top': cart.offset().top + 15,
			'left': cart.offset().left + 10,
			'width': 15,
			'height': 15
		}, 1000);

		imgclone.animate({
			'width': 0,
			'height': 0
		}, function () {
			$(this).detach()
		});
    });
});

Stronę z dodawaniem do koszyka można zobaczyć tutaj.