Анимация корзины!

[support 446]

В VamShop по умолчанию добавлена CSS анимация корзины.

Смотрите пример на http://demo.vamshop.ru

Добавьте товар в корзину.

Вот как будет выглядеть анимация, когда корзина с товаром.

Довольно интересно выглядит, не сильно мешает, но и в тоже время настойчиво показывает — оформите заказ, корзина не пустая.

Идея была такая — подчеркнуть пульсирующей анимацией корзину, т.е. донести до пользователя визуальным способом, что у Вас корзина не пустая и надо что-то сделать.

Либо оформить заказ, либо удалить из корзины.

Но и не сильно надоедать при этом всякими текстами, popup окнами, подсказками и т.д.

А вот, к примеру, как можно обратить внимание посетителя на голосовой поиск.

Читать заметку полностью

[IVAN.Z 2]

Отлично! Офигенно! 

[Роман_DD 2]

В 21.02.2020 в 10:17, ZM сказал:

Отлично! Офигенно! 

Слишком часто мигает, раздражает когда пытаешься на странице информацию читать, а оно долбит, надо как минимум раза в 3 реже подмигивать.

[support 446]

В 17.03.2020 в 17:28, Роман_DD сказал:

Слишком часто мигает, раздражает когда пытаешься на странице информацию читать, а оно долбит, надо как минимум раза в 3 реже подмигивать.

Например, что б мигала медленней, в /templates/vamshop4/css/vamshop4.css поменяйте:

.pulse-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

на:

.pulse-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 3.1s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 3.1s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 3.1s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 3.1s infinite cubic-bezier(0.66, 0, 0, 1);
  animation-delay: 0s;
}

Есть возможно указывать, сколько раз проигрывать css анимацию.

CSS свойство  animation-iteration-count

т.е. в /templates/vamshop4/css/vamshop4.css меняйте:

.pulse-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

например на:

.pulse-button {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation-iteration-count: 2;
}

Тогда анимация будет не бесконечная, а всего 2 раза.