Weblog

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.

Teilen macht Freude.
  • 1
    Share