Parallaxe mit / ohne jQuery

Animationen mit jQuery: Parallaxe beim Scrollen

Der Parallax-Effekt gehört zu den meistgefragten Effekten: Er reagiert auf Scrollen und erweckt den Eindruck von Tiefe, aber ohne Javascript spielen die mobilen Geräte nicht mit.

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

jQuery Parallax-Effekt

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, die beim Scrollen unterschiedlich verschoben werden, 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.

HTML Struktur für Parallaxen-Effekt
<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.

CSS für Parallaxe
.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.

jQuery
<script>
$(function () {
    let speed = 10;
    let lastScrollTop = 0;
    // Größere Variation = mehr Beschleunigung
    function positon(variation) {
        newPosition = (scrollPercent * (speed * variation)) - (speed * variation);
        return newPosition + "%";
    }
    $(window).scroll(function(e) {
        let 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

jQuery in Javascript übersetzen

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(){
   let row = document.querySelectorAll (".row");
   let h4 = document.querySelectorAll (".acc h4");
   let len = h4.length;
   for (let i=0; i<len; i++) {
      h4[i].onclick = function () {
         for (let 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 **/
let 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) {
      … 
   }
}