basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Für Seite baue ich an Rahmen (funktioniert aber noch nicht komplett, muss am einfachsten neu). Bestehend aus 1) Menu mit Logo +Links 2) SlideShow = SeitenHintergrund von externer Quelle via. iFrame. 3) darunter Text, mehrere externe InhaltElemente untereinander zB. Text, externe Seiten mit iFrame. Herausforderung = Start Menü ist anfangs halbdurchsichtig, soll unterhalb von der Slider Show angeordnet sein, also unterer Bildschirmrand. Wenn man scrollt, soll es dunkelblau + undurchsichtig werden, es soll oben im Bildschirmrand zu finden bleiben.

    Code

                                        
                                    <!doctype html>
    <html lang="de">
    <head>
    <title>Welcome!</title>
    <meta charset="utf-8">
      <style>
        *{
      margin:0;
      padding:0;
    }
    
    body{
        display: block;  
        background-image: url('/image/backgrnd_505.jpg');
        background-color:rgba(16,32,128,0.1);
        overflow:auto;
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    
    nav{
        background-color:rgba(135, 176, 218, 0.96); 
        position:sticky;
      top:0;
      display:flex;
      width:100vw;
      height:60px;
        z-index:100;
    }
    nav a{
      flex:1;
      font-size:30px;
      line-height:60px;
    }
    
    
    a {
          font-size: 14px; 
          text-decoration:none; 
          color:#fff;
    }
    a:hover {
          color: rgb(88,0,255);
    }
    
    
    
    .header {
            background-color: #f1f1f1;
            padding: 30px;
            text-align: center;
    }
    nav{
            overflow: hidden;
            background:rgba(0,0,255,0.20);
    }
    nav a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            text-decoration: none;
            font-size: 17px;
    }
    nav a:hover {
            background: #ddd;
            color: black;}
    nav a.active {
            background: #4CAF50;
            color: white;}
    
    
    
    
    
    
    
    
    iframe{
        height:100vh;
        width:100%;
    }
    
    .iframe1{
      height:calc(100vh - 90px);
    }
      </style>
    </head>
      <body>
    <div class="Header">
     <iframe class="iframe1" srcdoc="<h1>Iframe slideshow</h1>"></iframe>
    </div>
    <nav>
     <a href="index.html" title="start" alt="Start" onmouseover="Logo.src='/image/Logo1.png';" onmouseout="Logo.src=/image/Logo2.png">
    <img id="Logo" src="/image/Logo2.png" border="0" width="300px">
    </a>
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
    </nav>
    <iframe srcdoc="<h1>Iframe seite 1</h1>"></iframe>
    <iframe srcdoc="S<h1>Iframe seite  2</h1>"></iframe> 
    <iframe srcdoc="<h1>Iframe seite  3</h1>"></iframe> 
        <script>
            
    window.onscroll = function() {
      var StartMenu = document.getElementsByTagName("nav")[0];
    //    var sticky = StartMenu.offsetTop;
     // console.log(window.innerHeight/100*20);
    helper=window.pageYOffset/100*20;
      if(helper<20){
          helper='0.20';
      }else{
          if(helper>100){
             helper=1;
          }else{
            helper='0.'+helper;
          }
      }
      console.log(helper)
      StartMenu.style.background='rgba(0,0,255,'+helper+')';
    }
    
        </script>
    </body>
    </html>