CSS, HTML und Javascript mit {stil}

jQuery Effekte: Accordion und Parallaxe

Effekte: Parallaxe bei Scrollen Eule mit Büchern und Notebook in einem Daumenkino

Seitdem die Seiten von Apple den Accordion-Effekt das erste Mal präsentierte, ist der Fahrstuhl-Effekt in der Navigation populär.

Der Parallax-Effekt ist der meist gefragte Effekt: Er reagiert auf Scrollen und erweckt den Eindruck von Tiefe.

Der Effekt bietet nicht nur eine interessante Optik – er spart Platz und macht eine lange Navigation übersichtlich.

  • Kipplaster
    Accordion 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue sit amet lorem malesuada euismod. Nullam neque nibh, tincidunt eget molestie nec, semper sed neque.

  • Inselleben
    Accordion 2

    Nullam neque nibh, tincidunt eget molestie nec, semper sed neque.

  • Landschaftsgärtner
    Accordion 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue sit amet lorem malesuada euismod.

jQuery Accordion

Auslöser des Effekts ist ein Klick auf ein h5-Element.

<script src="/jquery.min.js" type="text/javascript"></script>
…
<script type="text/javascript">
$('#drawers').find('h5').click(function(){
    $(this).next().slideToggle();
    $("#drawers div").not($(this).next()).slideUp();
});
</script>

Das Accordion besteht aus einfachen div-Tags mit einem Bild und etwas Text.

<ul id="drawers">
   <li>
      <h5>Kipplaster</h5>
      <div class="first"><img src="laster.gif" alt="" … /> </div>
   </li>
   …
   <li>
      <h5>Ballonfahrer</h5>
      <div><img src="insel.gif" alt="" … /> </div>
   </li>
</ul>

Selbst das CSS für den Effekt ist sparsam.

#drawers div { display:none; }
#drawers div.first { display:block; }

jQuery Parallax-Effekt

Das Phänomen der Parallaxe kommt durch unterschiedliche räumliche Perspektiven zustande. Wer noch mit der analogen Kamera – nicht Spiegelreflex – fotografiert hat, kennt noch den Ausdruck der Sucher-Parallaxe: Der Sucher bot gegenüber dem Foto einen leicht versetzen Bildausschnitt durch eine andere Perspektive im Sucher als für das Objektiv.

Wer räumliches Zeichnen mit der Zentralperspektive gelernt hat, kennt den Trick der Zeichner: Was weiter weg ist, erscheint und kleiner. Wer Sport fotografiert, weiß, das eine Bewegung um so langsamer erscheint, je weiter entfernt sie stattfindet.

Der Parallax-Effekt nutzt diese Phänomene mit verschiedenen Hintergrundbildern, um den Eindruck von Bewegung mit räumlicher Tiefe zu verbinden.

Das HTML für den Parallax-Effekt sind schlank und einfach. Jedes div enthält ein Hintergrundbild: Zuerst die Bilder für den am weitesten entfernten Hintergrund, das vorletzte Hintergrundbild (Muscheln und Seesterne) bleibt stehen.

<div class="c">     
    <div id="aquarium">
    	<div class="fishy nflip fish-back"></div>
        <div class="fishy nflip fish-to-left"></div>
        <div class="fishy flip fish-back-flipped"></div>
        <div class="fishy fishyc"></div>
        <div class="fishy flip fish-flipped"></div>
    </div>
</div>

Das CSS ist minimal – die Hintergrundbilder liegen absolut positioniert im relativ positionierten Aquarium.

.flip { 
    display: none; 
}
#aquarium { 
    top: 30px; position: absolute; 
}
.fishy {
    position: absolute;
    width: 5000px; height: 370px;
}
.fishy.fish-to-left { 
	background: url('fish-to-left.png'); 
     
}
.fishy.fish-back { 
   background: url('fish-gray-to-left.png'); opacity: .4;
}
.fishy.fishyc {
    background: url('18.png');
    background-repeat: repeat-x;
    background-position: left bottom; 
}
/* Richtungswechsel */
.fishy.fish-flipped { 
    background: url('fish-to-right.png'); 
}
.fishy.fish-back-flipped {
	background: url('fish-gray-to-right.png'); opacity: .4;
}

Das Script muss nur die Hintergrundbilder in unterschiedlichen Geschwindigkeiten verschieben.

$(window).height() ist die Höhe des Browserfensters (aka ViewPort) ohne Maßeinheit. $(document).height() gibt die Höhe des Dokuments zurück (ebenfalls in Pixel und ohne Maßeinheit). Wenn $(document).height() kleiner als die Höhe des Viewports ist, wird die Höhe des Viewports zurückgegeben.

Noch eine Abfrage nach der Scroll-Richtung dazu (if (scrollNum > lastScrollTop)) und dann wechseln die Fische die Richtung, je nachdem, ob der Benutzer nach oben oder nach unten scrollt.

<script>
$(function () {
    var speed = 10;
    var lastScrollTop = 0;
    // Größere Variation = mehr Beschleunigung
    function positon(variation) {
        newPosition = (scrollPercent * (speed * variation)) - (speed * variation);
        return newPosition + "%";
    }
    $(window).scroll(function(e) {
        var scrollNum = $(window).scrollTop();
        scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height());

        if (scrollNum > lastScrollTop) {
            // downscroll
            $(".nflip").show(); $(".flip").hide();
            $(".fish-to-left").css("backgroundPosition", positon(-1.6) + ' 0');
            $(".fish-back").css("backgroundPosition", positon(-0.8) + ' 10px');

        } else {
            //upscroll
            $(".nflip").hide(); $(".flip").show();
            $(".fish-flipped").css("backgroundPosition", positon(-1.6) + ' 0');
            $(".fish-back-flipped").css("backgroundPosition", positon(-0.8) + ' 10px');

        }
        lastScrollTop = scrollNum;
    });
});
</script>

Quelle: Horizontal Parallax on Scroll - jQuery

Das jQuery-Script in Vanilla Javascript zu übersetzen ist heute nicht mehr besonders aufwändig, wenn wir auf alte Versionen von Microsoft IE verzichten können.

Wie weit ist der Benutzer gescrollt?

scrollObject = {
	x: window.pageXOffset,
	y: window.pageYOffset
};

Ohne Rücksicht auf alte Browser gibt es heute eine zuverlässige Abfrage für die Größe des Browserfensters und die gerenderte Höhe des Dokuments.

$(window).scrollTop()    scrollObject.y
$(document).height()     document.documentElement.scrollHeight
$(window).height()       window.innerHeight

Auch sonst ist der Aufwand für den Parallaxen-Effekt ohne jQuery gering, nur die effizienten kleinen jQuery Effekte hide() und show() brauchen mit Vanilla Javascript ein paar Zeilen zusätzlich.

Accordion ohne jQuery

CSS transition und ein paar Zeilen Vanilla Javascript setzen heute den Accordion-Effekt ebenso gut in Gang, wenn die ganz alten Browser keine Rolle mehr spielen (CSS transition: ab IE10).

Es gibt nur wenige CSS-Events, die eine CSS-Transition ohne Javascript und aufwändige Tricks anstoßen können. Ein paar Zeilen Javascript setzen die Transition bei einem Mausklick durch eine zusätzliche CSS-Klasse in Gang.

Suspendisse potenti

acco-books-3

Nullam risus dui, consectetur quis ullamcorper suscipit, facilisis a quam. Suspendisse potenti.

Cras ut elit

acco-paper-3

Etiam tincidunt dui est. Nam quis nulla quis neque efficitur rhoncus. Cras ut elit mattis, hendrerit orci a, varius lorem. Nullam finibus consequat dignissim. Suspendisse potenti. Suspendisse nec odio accumsan, vehicula nulla et, varius erat.

Donec ultricies

acco-spices-3

Donec ultricies sem sit amet ultricies venenatis.

<h4>Donec ultricies</h4>
<div class="row">
   <img src="spices.jpg" width="980" height="511" alt="spices">
   <p>Donec ultricies sem sit amet ultricies venenatis.</p>
</div>

Der Platz für die Elemente des Accordions darf unterschiedlich hoch sein. CSS transition agiert hier nicht auf height, sondern auf max-height. Wenn der Inhalt kürzer als die Höhe des Blocks bleibt, verhalten sich Blöcke mit min-height und height gleich.

.row { 
   max-height: 0;
   overflow:hidden;
   transition: max-height 1s; 
}
.acctoggle { 
   max-height: 800px;
   height: auto;
}

Der Trick mit max-height und height:auto bringt die drei Zeilen der Animation auf die passende Höhe. Zu beachten ins allenfalls, dass sich die Dauer der Animation nicht nach height, sondern nach max-height richtet.

<script>
(function(){
   var row = document.querySelectorAll (".row");
   var h4 = document.querySelectorAll (".acc h4");
   var len = h4.length;
   for (var i=0; i<len; i++) {
      h4[i].onclick = function () {
         for (var j=0; j<len; j++) {
            row[j].classList.remove("acctoggle"); 
         }
         this.nextElementSibling.classList.add("acctoggle");
      }
   }
})();
</script>

Accordion und Parallaxe – Responsive?

Auf kleinen Monitoren sind Effekte nicht immer benutzerfreundlich und steuern wenig zur Benutzererfahrung bei. Javascript matchMedia ist das Äquivalent zu CSS Media Queries. matchMedia kann den Effekt auf größere ViewPorts beschränken.

matchMedia wird von den modernen Browsern und von IE ab IE10 unterstützt.

/** Javascript Media Query **/
var mql = window.matchMedia("screen and (min-width:600px)");

/** Beim Laden der Seite initialisieren **/
tabbedGallery(mql);

/** Ein spezieller Event Listener für matchMedia **/
mql.addListener(tabbedGallery);

function tabbedGallery (mql) {
   if (mql.matches) {
      … 
   }
}