Анимация добавления товара в корзину при помощи jQuery


Чтобы клиент понимал, что товар, который он хотел купить в интернет магазине, был добавлен в корзину, нужно это наглядно показать. Можно сделать изменение цвета кнопки добавления товара в корзину, или изменение текста.
А можно сделать через анимацию объекта. И тут уже насколько фантазии хватит. Можно сделать, чтобы сама карточка товара улетала в корзину и тд.

Приведу пример такой небольшой анимации, реализуемой при помощи jQuery.
Кнопка добавления в корзину, должна быть во враппере.
Пишем такой JavaScript код, в котором, по клику на кнопку добавления товара в корзину, создаётся объект, который улетает в корзину.

$('.addToCart').click(function(e){ /* Клик по кнопке "Добавить в корзину" */
	var butWrap = $(this).parents('.but-wrap'); /* Запоминаем враппер кнопки */
  	butWrap.append('<div class="animtocart"></div>'); /* Добавляем во враппер кружок, который будет анимирован и улетать от кнопки в корзину */
    $('.animtocart').css({ /* Присваиваем стили кружку и позицию курсора мыши */
    	'position' : 'absolute',
      	'background' : '#FF0000',
      	'width' :  '25px',
      	'height' : '25px',
      	'border-radius' : '100px',
      	'z-index' : '9999999999',
      	'left' : e.pageX-25,
    	'top' : e.pageY-25,
    });
	var cart = $('.cart').offset(); /* Получаем местоположение корзины на странице, чтобы туда полетел кружок */
	$('.animtocart').animate({ top: cart.top + 'px', left: cart.left + 'px', width: 0, height: 0 }, 800, function(){ /* Делаем анимацию полёта кружка от кнопки в корзину и по окончанию, удаляем его */
		$(this).remove();
    });
});

Для примера можно создать такой HTML код

<div class="product"> <!-- Карточка товара -->
	<img src="http://waarmedia.com/english/file/2019/04/nuts.jpg" alt="" class="product-img">
	<span class="product-name">Орехи</span>
	<div class="but-wrap">
		<div class="addToCart">В корзину</div>
	</div>
</div>

<div class="cart">Корзина</div> <!-- Корзина -->

и такой CSS

body{
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}
.cart{
  position: absolute;
  display: table;
  width: auto;
  height: auto;
  box-sizing: border-box;
  background: #C94449;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  top: 10px;
  right: 10px;
}
.product{
  position: relative;
  display: table;
  width: 300px;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #262626;
  border-radius: 10px;
}
	.product-img{
	  position: relative;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	  box-sizing: border-box;
	  margin-bottom: 10px;
	}
	.product-name{
	  position: relative;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	  text-align: center;
	  margin-bottom: 10px;
	}
	.but-wrap{
	  position: static;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	}
	  .addToCart{
		position: relative;
		display: table;
		width: auto;
		height: auto;
		box-sizing: border-box;
		background: #FF0000;
		border-radius: 5px;
		padding: 8px 14px;
		font-size: 15px;
		color: #fff;
		margin: auto;
		cursor: pointer;
	  }

В итоге должно получится вот так


Для связи

Если у вас появились какие-либо вопросы, хотите получить индивидуальный совет или у вас есть интересное предложение, вы можете связаться через форму обратной связи.

Или написать прямо на почту info@bobreod.ru





Отправляя форму, вы соглашаетесь с нашей политикой конфиденциальности