basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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?

    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>