Archiv-Modus von Basti1012 Lösungspage

Wenn ich ein Produkt in einen Warenkorb lege, möchte ich eine Animation, wo ein kleines Image sich von der Position des Mausclicks zur Position des Warenkorbs bewegt. Ich hab das schon mal in irgendeinem Shop gesehen. Weiß jemand, wie man das verwirklichen könnte?

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
  *{
  margin:0;
  padding:0;
}
body{
  width:100%;
  height:100vh;
}
#ware{
  margin:0 auto;
  width:100px;
  height:30px;
  border:1px solid black;
}
.yes:hover{
  background:green;
  cursor:pointer;
}
#korb{
  margin:calc(100vh - 64px) auto 0 auto;
  width:100px;
  height:30px;
  border:1px solid black;
}
.no:hover{
  background:red;
  cursor:not-allowed;
}
#image{
  height:30px;
  width:30px;
  position:absolute;
  display:none;
}
#image img{
  width:30px;
}
</style>
<body>
<div id="ware" class="yes">WARE
  
  <div id="image"><img src="/image/default.webp"></div>
</div>
<div id="korb" class='no'>
KORB</div>
  <script>
    $('#ware').click(function(){
  var a = $('#korb').offset().top;
  var b = $('#korb').offset().left;
  im=$( "#image" );
  im.css({'display':'block'});
  im.animate({
     left: b,
     top: a
  }, 2000, function() {
      im.css({'display':'none'}).removeAttr('style');
  });
})
  </script>
</body>

basti1012.bplaced.net

Image zwischen 2 Punkten bewegen

Code