[gelöst] mit css animiertes objekt lokalisieren

Hi 2 all. Stehe ich auf dem Schlauch oder ist es nicht möglich die aktuelle Position zu ermitteln bei einem durch CSS animierten Objektes.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style> #info{ width:25vw; height:100px; margin:0 auto; margin-top:200px; border:1px solid red; } #hg{ height:100px; width:100px; position:absolute; top:0px; left:0px; animation:los 7s linear infinite; } @keyframes los{ 0%,100%{ position:absolute; left:2px; top:0px; } 25%{ position:absolute; top:2px; left:calc(100% - 100px); } 50%{ position:absolute; top:calc(100% - 100px); left:calc(100% - 102px); } 75%{ position:absolute; left:0; top:calc(100% - 102px); } } </style> <body> <div id="info"></div> <img id='hg' src="https://sebastian1012.bplaced.net/bilder/homer.jpg"> <script> setInterval(function(){ ff=$('#hg').position(); l=ff.left; t=ff.top; $('#info').html('Top = '+t.toFixed(2)+' Px<br>Left = '+l.toFixed(2)+' Px'); },100) </script> </body>

Add Comment

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

Comments

No comments yet. Be the first!