KERNI's SEITE

Ein Herzliches Hallo an Euch alle. Auf dieser Seite habe ich ein paar Tutorials oder auch nur Codeschnipsel zusammengestellt. Nicht alle sind von mir. Manche habe ich auch nur bei der Suche im Internet gefunden. Ich habe versucht die Fundorte zu den jeweiligen Codeschnipseln hinzuzufügen. Leider habe ich nicht mehr alle gefunden. Ich bin kein Professioneller Web Entwickler. Ich mache dies nur weil es mir spaß macht am Computer einige Dinge zusammenzubasteln. Ich hoffe ich kann Euch mit meinen kleinen Beispielen etwas weiterhelfen.

Die Codezeilen werden mit Prism dargestellt. Prism ist ein auf JavaScript basierter, erweiterbarer Syntax-Highlighter, der mit Blick auf moderne Webstandards entwickelt wurde. Er wird auf Millionen von Websites verwendet.

Nun aber genug geredet (geschrieben). Lasst uns anfangen.

Paralax Scrolling

Auf dieser und allen anderen Seiten, ist im Header ein Bild das beim Scrollen stehen bleibt. Ein netter effekt der relativ einfach umzusetzen ist.

HTML

<section>
   <div class="parallax" style="background-image: url(images/photo003.png);">
      <div class="parallax-text">
        <div class="hljs">Willkommen auf Kerni's Website</div>
      </div>
   </div>
</section>

CSS (funktioniert nicht auf dem iPhone, iPad)

.parallax {
   padding-top: 200px;
   padding-bottom: 200px;
   overflow: hidden;
   position: relative;
   width: 100%;
   background-attachment: fixed;
   background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}
.parallax-text {
   font-family: "Oswald", sans-serif;
   font-size: 70px;
   letter-spacing: 10px;
   text-align: center;
   color: white;
   font-weight: 400;
   z-index: 10;
   opacity: 0.9;
}

Ihr seht, es ist nicht viel Code nötig um einen kleinen Effekt auf eurer Seite zu zaubern. Das Bild das Ihr verwenden wolt sollte genügend groß sein. Dieses Bild hat eine Größe von 1500 x 1000px. Natürlich könnte man das noch ein wenig mit Javascript ausbauen und das Bild z.B. mit halber Geschwindigkeit beim Scrollen nach Oben scrollen lassen. Dieses einfache fixierte Bild soll aber erstmal reichen. Vielleicht baue ich es später noch ein. Die Seite befindet sich ja noch im Aufbau. Eine kleine Google Recherche wird Euch sicher zu einigen Tutorials führen die dieses Thema behandeln.

Update:

HTML für den Workaround

<section>
   <div class="parallax" style="--px-bg: url(images/photo003.png);">
      <div class="parallax-text">
        <div class="hljs">Willkommen auf Kerni's Website</div>
      </div>
   </div>
</section>

Da ich auf jeder Seite ein anderes Bild anzeige, ich das Sylesheet aber nicht für jede Seite anpassen will, musste ich mir was einfallen lassen. Zum Glück kann in CSS3 mit Variablen gearbeitet werden. Somit kann ich der Box .parallax den style="--px-bg: url( ... );" mitgeben und dieser wird im Stylesheet mit var( ... ) verwendet. Funktioniert auch auf dem iPhone / iPad.

CSS (Workaround für iPhone, iPad)

.parallax {
   padding-top: 200px;
   padding-bottom: 200px;
   overflow: hidden;
   position: relative;
   width: 100%;
}
.parallax::before {
   content: '';
   display: block;
   background-image: var(--px-bg);
   background-position: center;
   background-size: cover;
   position: fixed;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -10; /* ! Wichtig ! */
}