Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Animation 2

Animation 2

Hey! Ich habe nun eine Animation auf meiner Webseite eingebaut. Nun ist meine Frage: Die Aninmation kommt, wenn die Webseite neu geladen/geöffnet wird. Jedoch soll die Animation des Bildes erst kommen, wenn ich runterscrolle und bei diesem animierten Inhalt bin. Wie kann ich das machen?

Der hier verwendete Code

<html> <head> <script src="/js_webseite/jquery.js"></script> <style> body{ display:flex; flex-direction:column; height:1500px; } header{ background:#27abcd; height:500px; } nav{ height:200px; background:green; } #inhalt{ display:inline-block; position:absolute; top:400px; left:0px; background:red; height:80px; width:80px; animation:start 5s linear forwards infinite; text-align:center; font-weight:900; animation-play-state:paused; } span{ font-size:30px; } @keyframes start{ 0%,100%{ left:0; } 50%{ left:100%; } } </style> </head> <body> <header></header> <nav></nav> <div id="inhalt"><span id="mitte"></span></div> <script> function someAction(e) { var $win = $(window).scroll(function() { if($win.scrollTop() > 200) { $('#inhalt').css("animation-play-state", "running"); $('#mitte').html('Run'); }else{ $('#mitte').html('Stop'); $('#inhalt').css("animation-play-state", "paused"); } }) } window.addEventListener('mousewheel', someAction, false); </script> </body> </html>