Как сделать «Улетание иконок»?

Question

[Alexey10]

Добрый день)
В примере https://adv.ru/#StartProject при нажатии на любой пункт в блоке (ВЫБЕРИТЕ ТИП
ВАШЕГО ПРОЕКТА) улетает иконка в право и становится в другом месте. Как такой эффект называется, кто-то сталкивался с таким ?
Спасибо за помощь)

Comments

[2cha.headz]

на пальцах происходит так (на вашем сайте примере может и по другому):
когда кликаете на элемент, создается дубликат иконки, затем ей ставятся позишн абсолют и координаты куда она должна улететь, потом ее полет анимируется, и в момент когда она занимает нужное место, она удаляется и показывается оригинальная иконка в списке))

вот так я делал аналогичный эффект, полета товара в корзину (код естественно не весь):

$(target)  
      .clone()  
      .css({'position' : 'absolute', 'z-index' : '100', 'top' : sTop, 'left' : sLeft})  
      .appendTo("body")  
      .animate({opacity: 0.5, top: top, left: left}, 1000, function() {  
            $(this).remove();  
      });

Answer 1

[Stalker_RED]

Смещение можно вычислять при помощи calc или скриптом.
Возможно проще не translate а position задавать. Можно и через keyframes переделать.
Поворот и скорость подберите сами.

Comments

[Антон]

кота укачает, нельзя так с ними