Анимация при нажатии кнопки купить

Доброго времени суток уважаемые форумчане. opencart 2.0.3.1 Возник вопрос, а возможно ли как то анимировать нажатие кнопки купить, например, что бы рядом галочка появилась после нажатия на кнопку?

Заранее благодарен.

 

А разве движение вверх , это не анимация??

 

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

 

Галочка конечно норм, но если смотреть в сторону психологии это значит "Mission complete!".
Вы можете сделать всплывающие сообщение о добавленном товаре и внизу под текстом поставить баннер с релевантным предложением или поставить ссылку на все товары имеющие скидки, тогда есть 80% того что человек дальше продолжит смотреть каталог. Не у всех есть деньги на несколько товаров.

 

Используйте сторонние библиотеки
Пример:
http://tympanus.net/Development/Animocons/

 

Занимательные сторонние библиотеки... А как их использовать мануал есть? а то вот прям хочу их, но не знаю даже с чего начать.

 

Там с верху есть капелька, можно на нее нажать или
http://tympanus.net/codrops/2016/02/23/icon-animations-powered-by-mo-js/

 

Let’s have a look at an example. So we’ve used Font Awesome as icon font and include it in a button like this:

<button class="icobutton icobutton--thumbs-up">
<span class="fa fa-thumbs-up"></span>
</button>

The styles include just some resets and size definitions for the button.

You can now define your animations as follows:


var scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
var el = document.querySelector('.icobutton'),
elSpan = el.querySelector('span'),
// mo.js timeline obj
timeline = new mojs.Timeline(),

// tweens for the animation:

// burst animation
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : 'circle',
fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
x: '50%',
y: '50%',
opacity: 0.6,
childOptions: { radius: {20:0} },
radius: {40:120},
count: 6,
isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
// ring animation
tween2 = new mojs.Transit({
parent: el,
duration: 750,
type: 'circle',
radius: {0: 50},
fill: 'transparent',
stroke: '#988ADE',
strokeWidth: {15:0},
opacity: 0.6,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// icon scale animation
tween3 = new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
}
});

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mouseenter', function() {
timeline.start();
});

В какой файл добавлять, что бы заработало?

 

Исходя из вашего знания. Я бы посоветовал Вам поискать специалиста для добавления данной анимации.
Этим вы решите задачу быстрее.