2019年7月26日 星期五

按下加到購物車後,物品飛到購物車的效果



有些網站為了增加互動,會做把物品點了後東西飛到購物車的效果,這個只要善用網頁排版的概念就能夠做出來了,這邊來示範一下。

首先先用 html 排一個版,右上角是購物車,下面的商品列表會有增加到購物車的按鈕,另外會有一個空的區塊,是用來當點了加到購物車後把圖片放到裡面然後做動畫的地方。

See the Pen
fly to cart
by deathhell (@deathhell)
on CodePen.




接著點加到購物車後,要去計算空的區塊要移動的位置並替換掉裡面的圖片。
let itemList=$("#itemList").offset().left;
let cartPos=$("#cart").offset().left;

$(".btn").click(function(){
  let item=$(this).closest(".item");
  let img=item.find("img").attr("src");
  let itemX=item.offset().left-itemList;
  let itemY=item.offset().top;

  $("#show")
    .css({
      left: itemX,
      top: itemY,
      width: 200,
      opacity: 1
    })
    .find("img").attr("src", img)

});

接著計算要飛到的目標位置後,這邊我們使用 TweenMax 做中間的動畫。
TweenMax.to("#show", 0.8, {left:cartPos-itemList, top: 10, width: 20});
  TweenMax.to("#show", .3, {
    css:{
      opacity: 0
    }, delay:0.5})

這樣大致完成了,但因為動畫在播放的時候會想跑到終點,如果我們連點可能就會出問題,所以必須點了後就重置動畫。
TweenMax.killTweensOf('#show');

最後的結果在這邊:

See the Pen
fly to cart
by deathhell (@deathhell)
on CodePen.


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...