Ein einfacher Parallax Effekt mit CSS

Für mich gehört der sogenannte Parallax Effekt (vor allem bei One Pagern genutzt) zu den schönsten, aber auch einfachsten Effekten, die mit CSS machbar sind.

Ein Parallax Effekt wie dieser hier lässt sich mit ein bisschen CSS schnell selbst schreiben. Dazu muss zuerst eine Section angelegt werden, innerhalb sich der Effekt abspielen soll. Zusätzlich empfiehlt es sich für das stylen darin noch eine weitere CSS-Klasse mit einem DIV anzulegen:

<section class="parallax">
    <div class="parallax_innen">
            <h3>Bereich 2</h3>
            <p class="weiss">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p class="weiss">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</section>

Anschließend geht es an das CSS für die beiden dort bestimmten Klassen:

    .parallax {background: url("fotografin.jpg") repeat 100% fixed}
    .parallax_innen {padding-top: 5%; padding-bottom:5%;}

Mit background:url() wird das Hintergrundbild festgelegt. repeat und 100% sorgen dafür, dass das Hintergrundbild den kompletten Bereich der Section ausfüllen und fixed fixiert das Hintergrundbild schließlich. Und schon sind wir fertig.

Der gesamte Quellcode steht hier zum Download bereit.

.htaccess in WinSCP sichtbar machen

WinSCP ist seit langem das FTP-Programm meiner Wahl. Einer der wenigen Nachteile ist, dass man die Sichtbarkeit von versteckten Dateien erst selbst einstellen muss. Das geht aber schnell:

1. Den Reiter Einstellungen wählen

2. Dort den gleichnamigen Punkt Einstellungen anklicken

3. Im neuen Fenster den Punkt Listenfenster wählen

4. Die Checkbox vor Versteckte Dateien anzeigen aktivieren

Animationen mit CSS: transform & transition

Früher brauchte es schon JavaScript, um etwas Bewegung auf der Webseite ins Spiel zu bringen. Heute kann das aber schon einfaches CSS. Zum Beispiel mit Hilfe von transform.

Mit Hilfe von transform lassen sich etwa Bilder leicht davon überzeugen in einen anderen Zustand überzugehen, etwas sich um ein paar Grade zu verschieben oder gar plötzlich zu wachsen. Ein paar Beispiele habe ich auf dieser Seite angezeigt.

Beispiel 1 arbeitet mit rotate(x), dem man in den Klammern einfach die Anzahl der Grade eingeben kann, in der sich das Bild im Uhrzeigersinn dreht. Beispiel 2 wiederum funktioniert mit Hilfe von translate(x,y) mit dessen Hilfe man das Bild um eine gewisse Pixelzahl nach rechts und dann nach unten verschiebt. Im 3. Beispiel kommt scale(x,y) zum Einsatz, das das Bild im eigegebenen Verhältnis vergrößert. skew(x,y) zeigt das Bild in Beispiel 4 schließlich verdreht aus. Damit man den Effekt auch sieht, habe ich das Bild eingebunden und erst wenn die Maus darüber fährt, wird mittels :hover der eigentliche Effekt ausgelöst:

.rotate:hover {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   }

.translate:hover {
    -webkit-transform: translate(20px,10px);
    transform: translate(20px,10px);
    }

.scale:hover {
    -webkit-transform:scale(2,2);
    transform:scale(2,2);
    }

.skew:hover {
    -webkit-transform:skew(10deg,10deg);
    transform:skew(10deg,10deg);
    }

Jetzt ist dieser Effekt aber natürlich ein bisschen plötzlich, aber mittels transform bekommt man auch einen sauberen Übergang hin. Beispiel 5 zeigt das sehr schön, in dem sich das Bild dort nicht von jetzt auf gleich vergrößert, sondern in gewisser Weise wächst. Dazu muss man aber den Urzustand des Bildes eine CSS-Anweisung geben, in diesem Fall wird ein Übergang von 4 Sekunden angegeben.

.scale-transition {
    transition: 4s;
    }

.scale-transition:hover {
    -webkit-transform:scale(2,2);
    transform:scale(2,2);
    }

transform ist natürlich noch zu anderen Dingen gut, etwa der Simulation von Wahlbalken, sobald man mit der Maus darauf kommt. Aber davon später mehr.

Das ganze Beispiel samt Quellcode findet ihr hier.

Eine eigene YouTube-Playlist erstellen

Eigentlich sollte man ja meinen die Usability bei YouTube sei zumindest ausreichend, damit sich Otto-Normal-User damit zurecht findet. In vielen Fällen stimmt das ja auch, wer allerdings auf seiner Webseite schon mal eine Playlist eingebunden hat, wird da vielleicht anders denken. Denn nicht wenige User dürfte die ausklappbare Playlist links oben schlicht entgehen.

Dem kann man an sich nicht wirklich Abhilfe leisten, allerdings kann man mit Hilfe von ein wenig JavaScript relativ simpel eine eigene Playlist wie jene in diesem Screenshot zusammenbauen:

youtubplaylist

Dabei ist das obere Video das Standard-iFrame von YouTube, während die unteren Vorschaubilder die eigene Playlist abbilden. Natürlich ist das Ganze so miteinander verknüpft, dass ein Klick auf eines der Vorschaubilder im eingebundenen iFrame das entsprechende Video abspielt.

Der Code für iFrame und erstes Vorschaubild sieht folgendermaßen aus:

<iframe id="vid_frame" width="1100" height="620" src="https://www.youtube-nocookie.com/embed/mL5YtfBgK1M?list=PLOLx2a4eonZUD7ePvVvh_Ex5I4AX22qsa" frameborder="0" allowfullscreen></iframe>

<p><strong>Playlist:</strong></p>
<div class="vid-list">
<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1'">
<div class="vid-item">
  <div class="thumb">
   <img src="http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg">
  </div>
  <div class="desc">
      Mercedes GLE Coupe Tuning mit Maserati Ghibli V8 Sound
  </div>
</div>
</div>

Zuerst kommt das von YouTube kopierte iFrame, das allerdings mit id=“vid_frame“ ergänzt wird. Das ist notwendig, damit die JavaScript-Funktion weiß, wo es das in der Playlist angeklickte Video abspielen soll.

Eingebunden wird das ganze mittels des EventHandlers onClick, hier begegnet uns das vid_frame innerhalb der JavaScript-Funktion ja wieder. Als Quelle, src für Source, wird dann das YouTube-Video angegeben, das abgespielt werden soll – hier inklusive der Anweisung automatisch gestartet zu werden und die Info auszublenden. Im Prinzip reicht es in ‚http://youtube.com/embed/mL5YtfBgK1M?autoplay=1&rel=0&showinfo=0&autohide=1‘ die Video ID mL5YtfBgK1M durch die des gewünschten Videos zu ersetzen.

Theoretisch könnte man dann auch einen einfachen Textlink setzen, mit einem Vorschaubild sieht das ganze aber doch viel besser aus. Gut, dass man eine ganze Reihe von Vorschaubildern eines YouTube-Videos auch direkt ansteuern kann. nämlich mit der URL http://img.youtube.com/vi/mL5YtfBgK1M/0.jpg. Auch hier muss man einfach nur die gewünschte Video-ID austauschen. Gefällt einem das 1. Thumbnail nicht, kann man mit 1.jpg das zweite ansehen usw. usf.

Das komplette Beispiel zum herunterladen gibt es hier, im Einsatz befindet es sich unter www.powersoundmodul.de.