Frage Bug im Parallax-Effekt

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
Hallo liebes Forum,

ich habe auf folgender Internetseite einen Parallax-Effekt:
https://www.xn--frachtagentur-krger-lbc.de/test/index.html
(Die Quelle wird leider nur Temporär verfügbar sein, sobald die Frage erledigt ist, muss ich sie leider runter nehmen)

Der funktioniert auch. Jedoch nicht einwandfrei.
Wenn man mal für 30 Sekunden (oder auch weniger) immer hoch und runter scrollt (also im Bereich des Parallax-Effektes), dann erkennt man klare Performance-Probleme. Es fängt an zu ruckeln.
Lädt man die Seite nun neu, geht wieder alles.

Die Javascriptquelle zum Parallax findet man hier:
https://www.xn--frachtagentur-krger-lbc.de/test/js/parallax_effect.js

Wichtig zu sagen, die Javascript-Quelle ist von der Länge her noch NICHT optimiert.
Dies sollte aber nicht ausschlaggebend sein.

Ich bedanke mich schon mal für jegliche Hilfe
Aaron

Edit:
Wichtig - Man muss mit dem Mausrad scrollen
 
Zuletzt bearbeitet:

scbawik

Senior HTML'ler
14 Juli 2011
2.542
448
83
Hallo liebes Forum,

ich habe auf folgender Internetseite einen Parallax-Effekt:
https://www.xn--frachtagentur-krger-lbc.de/test/index.html
(Die Quelle wird leider nur Temporär verfügbar sein, sobald die Frage erledigt ist, muss ich sie leider runter nehmen)

Der funktioniert auch. Jedoch nicht einwandfrei.
Wenn man mal für 30 Sekunden (oder auch weniger) immer hoch und runter scrollt (also im Bereich des Parallax-Effektes), dann erkennt man klare Performance-Probleme. Es fängt an zu ruckeln.
Lädt man die Seite nun neu, geht wieder alles.

Die Javascriptquelle zum Parallax findet man hier:
https://www.xn--frachtagentur-krger-lbc.de/test/js/parallax_effect.js

Wichtig zu sagen, die Javascript-Quelle ist von der Länge her noch NICHT optimiert.
Dies sollte aber nicht ausschlaggebend sein.

Ich bedanke mich schon mal für jegliche Hilfe
Aaron

Edit:
Wichtig - Man muss mit dem Mausrad scrollen
Kann es zwar an meinem PC nicht nachvollziehen, aber der Fehler ist offensichtlich: Du fügst bei jedem scroll event weitere scroll listener hinzu. Korrigierter Code folgt gleich...
 

scbawik

Senior HTML'ler
14 Juli 2011
2.542
448
83
Kann es zwar an meinem PC nicht nachvollziehen, aber der Fehler ist offensichtlich: Du fügst bei jedem scroll event weitere scroll listener hinzu. Korrigierter Code folgt gleich...
JavaScript:
(function ($, window) {

    // Zuerst alle nötigen Elemente in Variablen packen, damit diese
    // nicht bei jeder Iteration neu selektiert werden müssen
    var $window = $(window);
    var $parallaxContainer = $('.parallax-container');
    var $parallaxText = $('.parallax-text');
    var $slideButtons = $('.slide-buttons');
    var $parallax1 = $('.parallax-1');
    var $swiperContainer = $('.swiper-container');

    // Eine Variable die den aktuellen "Modus" hält
    var mode = 'normal';

    // Methode für "normalen" Effekt
    var normal = function () {

        var wScroll = $window.scrollTop();

        if (wScroll <= $parallaxContainer.height()) {

            $parallaxText.css({
                'transform': 'translate(0px, ' + wScroll / 40 + 'vH)'
            });

            $slideButtons.css({
                'transform': 'translate(0px, ' + wScroll / 19.53 + 'vH)'
            });

            $parallax1.css({
                'transform': 'translate(0px, ' + wScroll / 15 + 'vH)'
            });

            $swiperContainer.css({
                'transform': 'translate(0px, ' + wScroll / 30 + 'vH)'
            });

        }

    };

    // Methode für "small" Effekt
    var small = function () {

        var wScroll = $window.scrollTop();

        if (wScroll <= $parallaxContainer.height()) {

            $parallaxText.css({
                'transform': 'translate(0px, ' + wScroll / 65 + 'vH)'
            });

            $slideButtons.css({
                'transform': 'translate(0px, ' + wScroll / 17.54 + 'vH)'
            });

            $parallax1.css({
                'transform': 'translate(0px, ' + wScroll / 15 + 'vH)'
            });

            $swiperContainer.css({
                'transform': 'translate(0px, ' + wScroll / 10 + 'vH)'
            });

        }

    };

    // Scroll führt die entsprechende Funktion anhand
    // des aktiven "Modus" aus
    $window.scroll(function () {

        if(mode == 'normal') {
            return normal();
        }

        return small();

    });

    // Resize ändert einfach nur den "Modus" entsprechend und 
    // "triggert" im Anschluss das scroll event
    $window.resize(function () {
        mode = 'small';

        if ($window.height() >= 750) {
            mode = 'normal';
        }

        $window.scroll();
    });

    // Die resize Funktion "triggern", um die ganze Kette gleich
    // zu Beginn 1x auszuführen
    $window.resize();

})(jQuery, window);
Ungetestet, aber sollte funktionieren.
Was ich weggeschmissen habe, sind die unnötigen und zudem falschen CSS angaben:

Code:
$(window).resize(function () {
    if ($(window).height() >= 750) {
        $('.parallax-1, .parallax-text, #slider, .slide-buttons, .das, .parallax-container, .slide-buttons').removeClass("height-50");
        $('.partext').css("");
        $('.control_prev').css("");
        $('.control_next').css("");

        normal();
    } else {

        $('.parallax-1, .parallax-text, #slider, .slide-buttons, .das, .parallax-container, .slide-buttons').addClass("height-50");
        $('.partext').css("max-width", "100vW");
        $('.control_prev').css("left", "0");
        $('.control_next').css("right", "0");
        small();
    }
});
Da ist für mich erstens nicht wirklich ersichtlich was das werden soll. Bin mir jedoch sicher dass man das eleganter lösen kann.
 
Zuletzt bearbeitet:
Reactions: Aaron3219

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
Nun ja,
wenn das window < 750px ist, soll der Parallax-container auf eine Größe von 100 vH.
Die verschiedenen Elemente müssen dann vom CSS auch ein bisschen angepasst werden.

Das war der Plan hinter dem CSS-Schnipsel
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.120
443
83
Berlin
Wenn man mal für 30 Sekunden (oder auch weniger) immer hoch und runter scrollt (also im Bereich des Parallax-Effektes), dann erkennt man klare Performance-Probleme. Es fängt an zu ruckeln.
Kein Wunder. Füge mal ein console.log() hinzu und schau dir an, wie oft dein Event gefired wird. window.resize() und scroll() sind sehr expensive. Deshalb sollte man zur Performanceverbesserung ein Delay einbauen.
http://bencentra.com/code/2015/02/27/optimizing-window-resize.html
https://dannyvankooten.com/delay-scroll-handlers-javascript/
 

scbawik

Senior HTML'ler
14 Juli 2011
2.542
448
83
Nun ja,
wenn das window < 750px ist, soll der Parallax-container auf eine Größe von 100 vH.
Die verschiedenen Elemente müssen dann vom CSS auch ein bisschen angepasst werden.

Das war der Plan hinter dem CSS-Schnipsel
Hört sich für mich eher nach einer Sache für CSS und Media Queries an?
Das ist aber eher ein on scroll end-Event, denn es wird erst ausgeführt nach dem man 100ms nicht scrollt. Für Parallax daher nicht geeignet - oder übersehe ich da was?
 
Zuletzt bearbeitet:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
Also @scbawik wenn ich das richtig verstanden habe, menite Tronjer einmal ein end-scroll Event, aber auch ein end-resize event.
Das End-Resize event ist durchaus eine nützliche Sache.

Das CSS ist tatsächlich eine Sache für die Media queries.
Ich wollte nur nicht noch das CSS posten.
 

scbawik

Senior HTML'ler
14 Juli 2011
2.542
448
83
Also @scbawik wenn ich das richtig verstanden habe, menite Tronjer einmal ein end-scroll Event, aber auch ein end-resize event.
Das End-Resize event ist durchaus eine nützliche Sache.

Das CSS ist tatsächlich eine Sache für die Media queries.
Ich wollte nur nicht noch das CSS posten.
Habe mich auch nur auf das Scrollen bezogen, da es schlichtweg nicht mehr funktionieren würde mit dieser Optimierung.

Resize Optimierung ist mMn. jedoch auch sinnlos; wenn wir schon dabei sind:

Resize ist wirklich kein alltägliches Event (In den meisten Fällen vermutlich Fenster maximieren, bzw. Orientation change). Außer Entwicklern sitzt niemand vor seinem Browser und skaliert das Fenster hin und her und gibt dabei auch noch etwas auf Performance...

Ich mag mich täuschen, aber beim Resizen muss der Browser sowieso neu rendern.
Ob da nun im nächsten Frame ein paar CSS Angaben anders sind oder nicht, macht vom Berechnungsaufwand keinen Unterschied. So zumindest meine Theorie. Davon mal abgesehen dass die Performance sowieso egal ist.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.059
205
63
18
Nun ja ich glaube nicht, dass es einen großen Unterschied macht, aber wenn ich resize muss er ja bei jedem Pixel neu abfragen, ob nun das Fenster < oder > als ... ist.
Bei einem end-Resize event würde ja nur einmal nach dem resize abgefragt werden.
 
Zuletzt bearbeitet:
Werbung:

Latest posts