[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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.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="/image/kermit_.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>