Lösungen ,slidemenunativjs

slidemenunativjs.php

Quell Code

 <!DOCTYPE HTML>
<html lang="de">
<head>
<title>Slidemenü ohne Jquery und frameworks</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Figcaption figure flip boards</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
      #a1{
  height:300px;
  width:200px;
  background:red;
  margin-top:-300px;
  animation:runter 2s linear forwards infinite;
}
@keyframes runter{
  0%{
    margin-top:-300px;
  }
  100%{
    margin-top:-0px;
  }
}



#a2{
  position:fixed;
 left:300px;
  height:300px;
  width:200px;
  background:green;
   top:-300px;
 
}
footer{
position:fixed;
bottom:200px;
left:0;
}
    </style>
  </head>
  <body>



<div id="a1"><div>Inhalt<br>Wird mit<br>Keyframes runter gefahren</div></div>



<div id="a2"><div>Inhalt<br>Wird mit<br>Javascript runter gefahren</div></div>
    <script>
      go(300);
function go(h){
  
  
  
  document.getElementById('a2').style.top='-'+h+'px';
  
  if(h>=1){
    h=h-10;
     setTimeout(function(){go(h)},100); 
  }else{
    h=300;
    go(h);
  }

}

      
    </script>
    <footer><h1>Links ist mit Keyframes und rechts mit Js ohne Jquery</h1></footer>
  </body>
</html>