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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.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="https://assets.codepen.io/1676856/internal/avatars/users/default.png?fit=crop&format=auto&height=80&version=1601304366&width=80"></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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!