Depot43-Unterlagen - Parallax und Bootstrap

HTML Elemente

            
            

<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>Bootstrap CDN</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
		    html {
      scroll-behavior: smooth;
    }
    body,
    html {
        height: 100%;
        margin: 0;
        font: 400 15px/1.8 "Lato", sans-serif;
        color: #777;
        background-color: #7362ca;
    }
    .affix {
          top:0;
          width: 100%;
          z-index: 9999 !important;
      }
      .navbar {
          margin-bottom: 0px;
      }

      .affix ~ .container-fluid {
         position: relative;
         top: 50px;
      }
    .navbar {
        border-radius: 0px;
        box-shadow: 5px 5px 8px rgba(0,0,0,0.9);
    }
    .header {
        background-color:#7362ca;
        color:#fff;
        height:200px;
    }
        h3 {
            letter-spacing: 5px;
            text-transform: uppercase;
            font: 20px "Lato", sans-serif;
            color: #111;
            text-align: center;
        }

        div.img {
            position: relative;
            opacity: 0.5;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;

        }

        .img-1 {
            background-image: url("https://depot43.ch/unterlagen/assets/microcss/badeplaetzli.jpg");
            min-height: 100%;
        }

        .img-2 {
            background-image: url("https://depot43.ch/unterlagen/assets/microcss/bootsteg.jpg");
            min-height: 60%;
        }

        .img-3 {
            background-image: url("https://depot43.ch/unterlagen/assets/microcss/brunnen.jpg");
            min-height: 400px;
        }

        .img-4 {
            background-image: url("https://depot43.ch/unterlagen/assets/microcss/urnersee_schiff.jpg");
            min-height: 250px;
        }

        .img-5 {
            background-image: url("https://depot43.ch/unterlagen/assets/microcss/wegderschweiz.jpg");
            min-height: 100%;
        }

        section {
            position: relative;
            color: #777;
            background-color: white;
            text-align: center;
            padding: 80px 80px;
            text-align: justify;
            box-shadow: 5px 5px 8px rgba(0,0,0,0.9);
        }

        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }

        .caption span.button-dark {
            background-color: #111;
            color: #fff;
            padding: 16px 24px;
            font-size: 25px;
            height: 60px;
            letter-spacing: 10px;
            border-radius: 30px;
            text-transform:uppercase;
        }

        .button-clear {
            background-color: transparent;
            font-size: 25px;
            color: #f7f7f7;
        }
        code, pre {
            color:#222;
            padding:6px;
            border: 1px solid #ccc;
        }
        span.smart {display:none;}
        span.text {
            position: absolute;
            margin: -2px 12px;
        }
        



        /* Small Devices, Tablets */
    @media only screen and (max-width : 362px) {
        .img {
                background-attachment: scroll;
                width:100%;
                height:auto;
                max-height:200px;
            }
        section {
                padding: 40px 20px;
            }
            span.smart {display:block;}
        .caption span.button-dark {
            background-color: #111;
            color: #fff;
            font-size:1.2em;
            min-width:90%;
            height: auto;
            border-radius: 0px;
        }
    }
    </style>

</head>
<body>

<div class="container-fluid header">
  <h3>Drei Techniken in einer Website</h3>
  <p>Mit CSS die Bilder Parallax Positionieren.</p>
  <p>Mit SmothScroll die Section-Links behandeln.</p>
  <p>Mit Bootstrap Navbar und Affix-Navigation den Kopf gestalten.</p>
</div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#">HOME</a><span class="smart">Smart</span>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#section1">Section 1</a></li>
            <li><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#section2">Section 2</a></li>
            <li><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#section3">Section 3</a></li>
            <li><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#section4">Section 4</a></li>
        </ul>
    </div>
    </div>
</div>
</nav>
    

    <div class="img img-1">
        <div class="caption">
            <span class="button-dark">SCROLL RUNTER!</span>
        </div>
    </div>

    <section id="section1" class="text1">
        <h3>Parallax Effekt - was ist das?</h3>
        <p>Parallax-Scrolling ist ein Trend im Web. Als Parallaxe (von altgriechisch παράλλαξις parállaxis „Veränderung, Hin- und Herbewegen“) bezeichnet man die scheinbare Änderung der Position eines Objektes, wenn der Beobachter seine eigene Position verschiebt.</p>
        <p>Beim "Parallax-Scrolling" einer Website verschieben wir nicht unsere Position, aber wir verschieben die Hintergrundbilder in anderer Relation als die Textflächen im Vordergrund. Dadurch entsteht der Eindruck, als würden wir unsere Position verschieben, während wir auf einen 2-Dimensionalen Bildschirm schauen. Wir können also von einem "Web-Trompe l'oeil" sprechen.</p>
    <div class="rauf"><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#"><span class="glyphicon glyphicon-triangle-top"></span> <span class="text">nach oben</span></a></div>
    </section>

    <div class="img img-2">
        <div class="caption">
            <span class="button-clear">JEDER BILDBEREICH KANN MIT VERSCHIEDENEN HÖHENANGABEN AUSGESTATTET WERDEN.</span>
        </div>
    </div>


    <section id="section2" class="text2">
       <h3>Die Technik</h3>
        <p>Es gibt verschiedene Techniken, das zu erreichen. Die naheliegendste scheint mir, dies mit CSS zu bauen. Dazu benutzen wir abwechselnd: div-Elemente für Bild und Textbereiche die im HTML-Code untereinander angeordnet werden.</p>
        <h3>HTML</h3>
        <p>Im diesem Beispiel: 'div class="img"' für die Bilder und section 'class="text"' für die Texbereiche.<br>
        Im Seitenquelltext ist es leicht ersichtlich, dass sich Bild- und Textbereiche abwechseln. Ohne Eingriffe mit CSS, werden beim scrollen die einzelnen Elemente (ganz unspektakulär) von oben nach unten in ihrere Reihenfolge angezeigt.</p>
        <h3>CSS</h3>
        <p>Die im HTML leeren Bildbereiche werden jeweils mit einem Hintergrundbild und einer Angabe der gewünschte Höhe versehen</p>
        <pre>background-image: url("images/meinbild.jpg");
min-height: 100%;</pre>
        <p>Der Trick bei der Sache ist, dass die Hintergrundbilder mit "fixed" positioniert sind. Dadurch befinden sie sich immer an der oberen Kante des Browserfensters, währen die Textbereiche wie gewohnt scrollbar sind. Optional wird die Parallax-Site noch etwas verschönert, indem die Bilder mit "cover" über die ganze Breite des Fensters in Szene gesetzt, eingemittet und nicht wiederholt werden.</p><pre>
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;</pre>
    <div class="rauf"><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#"><span class="glyphicon glyphicon-triangle-top"></span> <span class="text">nach oben</span></a></div>
    </section>


    <div class="img img-3">
        <div class="caption">
            <span class="button-dark">SCROLL HOCH ODER RUNTER!</span>
        </div>
    </div>


    <section id="section3" class="text3">
       <h3>Die Bilder und Responsiv-Design</h3>
        <p>Du kannst hoch- und runterscrollen um das Feeling von Parallax Scrolling zu erleben. Die mit "cover" platzierten Bilder richten sich, ihrem Seitenverhältniss entsprechend, entweder an der Breite oder der Höhe des Fensters aus. In jedem Fall füllt das Bild das Browserfenster randlos aus.</p>
        <p>Für grosse Bildschirme braucht es ein entsprechend grosses Bild, andernfalls wird es nach ober skaliert.</p>
        <p>Für kleine Bildschirme (Smartphone), kann das skalieren unterbinden werden, damit die Bilder nicht zu klein werden.</p>
    <div class="rauf"><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#"><span class="glyphicon glyphicon-triangle-top"></span> <span class="text">nach oben</span></a></div>
    </section>


    <div class="img img-4">
        <div class="caption">
            <span class="button-dark">Alles nur halb so wild!</span>
        </div>
    </div>


    <section id="section4" class="text4">
       <h3>Einheitliches Erscheinungsbild</h3>
        <p>Aus gestalterischer Sicht, lohnt es sich bei Parallax-Design auf ein einheitliches Erscheinungsbild zu achten. Durch die Scrollbewegungen ensteht ein eher unruhiger, wilder Eindruck.  In diesem Beispiel habe ich in die CSS-Trickkiste gegriffen: Die Bilder sind, mit "opacity" auf 50% Transparenz gesetzt. Der Blau-Violette Hintergrund des "body"-Elements färbt alle Bilder, so dass ein zwar falschfarbiges, aber gestalterisch einheitliches Erscheinungsbild entsteht.</p>
        <p>Ein leichter Schatten unter den Textflächen unterstützt des 3-Dimensionalen Eindruck.</p>
        
        <div class="rauf"><a href="/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap#"><span class="glyphicon glyphicon-triangle-top"></span> <span class="text">nach oben</span></a></div>
    </section>
    

       <footer class="row">
        <p class="adress col-sm-6">
            Adresse<br>
            Name<br>
            Strasse<br>
        </p>
        <p class="copy">
            America Design 2020
        </p>
    </footer>



    <div class="img img-5">
        <div class="caption">
            <span class="button-dark">CSS und JS!</span>
        </div>
    </div>


</body>
</html>


 

            

Anleitung

Die Parrallax-Anordnung wird in ein Bootstrap-Layout gepackt. Das ermöglicht:

Eine Affix-Header-Navigation (der Header lässt sich nach oben scrollen, die Navigation bleibt am oberen Browserrand ersichtich)
Die Navigation zu den einzelnen Sections wird mit jeweils einem Anker ausgeführt. Bei Klick wird der Anker ausferufen, der Scrollbereich entsprechend gesetzt
Mit SmoothScroll wird erreicht, dass bei Klick auf einen Navigationspunkt die Seite nicht springt, sondern zum Ankerpunkt rollt
Safari-Browser macht da leider nicht mit, Apple bleibt wie oft Eigensinnig.

Affix-Header

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="197">
  <div class="container-fluid">
    <div class="navbar-header">
        ...
    </div>
  </div>
</nav>

Bootstrap CSS

Für den Affix.Header werden die JS-Bibliotheken von jQuery und Bootstrap, zudem die Bootstrap CSS-Datei benutzt:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

SmoothScroll

Die Eigenschaft gillt noch als "Arbeitsentwurf", wird aber von allen aktuellen Browserversionen unterstützt.

    html {
        scroll-behavior: smooth;
    }

DB-Table: parallax-bootstrap