Depot43-Unterlagen - Parallax, Bootstrap und jQuery

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>
		   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;}



        /* 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 id="ontop" class="container-fluid header">
  <h3>Drei Techniken in einer Website</h3>
  <p>Mit CSS die Bilder Parallax Positionieren.</p>
  <p>Mit Bootstrap Navbar und Affix-Navigation den Kopf gestalten.</p>
  <p>Mit jQuery die "SmoothScroll"-Eigenschaften bereitstellen.</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-bootstrap-und-jquery#ontop">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-bootstrap-und-jquery#ontop"><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-bootstrap-und-jquery#ontop"><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-bootstrap-und-jquery#ontop"><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-bootstrap-und-jquery#ontop"><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>

<script>
// scroll to hash on click
$("a[href*='#']").on('click',function(e){

  e.preventDefault();
  var $self = $(this);

  if ( $( '#'+$self.attr('href').split('#').pop() ).length ) {
      window.setTimeout(function(){
        $('html, body').animate({

          scrollTop: $( '#'+$self.attr('href').split('#').pop() ).offset().top -50

        }, 2000);
      }, 250);
  } else {
      window.location = window.location.origin + $(this).attr('href');
  }

});

// scroll to hash if in url
$(document).ready(function(){

  if( window.location.hash && $( window.location.hash ) ){

    window.setTimeout(function(){
      $('html, body').animate({
        scrollTop: $( window.location.hash ).offset().top -50
      }, 2000);
    }, 250);
  }

});
</script>

</body>
</html>


 

            

Parameter

Die CSS-Lösung mit "SmoothScroll" wird von älteren Browserversionen und Safari nicht unterstützt. Die Lösung mit jQuery ist aufwändiger, bedingt Javascript, bietet aber interessante Parameter um das Scrollverhalten zu steuern.

Wird eine Affix-Navigation verwendet ist die ideale Scrollposition zum anhalten der Animation nicht der obere Browserrand. Die Navigation, da sie nicht mitgescrollt wird, braucht eine bestimmte Höhe. Das ergiebt für den idealen ScrollPunkt einen Versatz dieses Wertes.
Eigenschaften wie Scroll-Tempo, Delay (Zeitspanne zwischen Klick und Animation) und Offset (Abstand zwischen Scrollposition und Browserrand oben) können angepasst werden.
Zusätzlich kann eine beliebige Ankerposition als Link aufgerufen werden, auf die beim Start der Seite gescrollt wird.

    window.setTimeout(function(){
      $('html, body').animate({
        scrollTop: $( window.location.hash ).offset().top -50  /* Pixelversatz am oberen Rand */
      }, 2000);  /* Tempo */
    }, 250);  /* Delay */

DB-Table: parallax-jquery