Image zwischen 2 Punkten bewegen
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?
Der hier verwendete 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>