Parallax Problem (z.B. Scrollen bei "Wir sind anders")

[springers54]

https://www.i-talk24.net/msg/63cd908

• [ ] Text sollte stehen bleiben und nur das Hintergrundbild sich bewegen
• [ ] Höhe des Hintergrundbildes anpassen

[joergsteinhauer]

Ja, tatsächlich ist mir bei dem Parallax Effekt auch ein ähnliches Problem aufgefallen, jedoch nur dann, wenn ich das Browser-Fenster verkleinere/vergrößere. Aber verkleinern/vergrößern macht kaum jemand, max. nur wenn man Bildschirm dreht (Smartphones, Tablets).

Beim Laden der Seite wird alles im JS berechnet und passt sich dann der Fenstergröße an, das sollte an sich also alles gut funktionieren.

Hier sieht man bei mir, dass an sich alles sichtbar bleibt und somit gut aussieht:

Hast du da evtl. irgendwie mit der Fenstergröße gespielt oder passiert dieses Problem sofort beim ersten Aufruf der Seite? Welche Breite/Höhe hat dein Bildschirm (px)?

An Sonsten müsste ich schauen, wo das Problem liegt. Kann auch sein, dass die benutze JS Bibliothek nicht ganz so gut ist und ich was neues suchen muss.

[springers54]

In deiner Animation zeigt sich das Problem ebenso. Wenn man im Bereich der Lehrer ist, dann ist die Überschrift weg, der Text scrollt nach unten. Auch wenn dich der Vergleich mit der alten Seite nervt, hier steht die Überschrift und dei Bilder mit Text scrollen von rechts. Damit sieht es ruhiger aus. Nachdem der Text-Bildblock einmal eingeflogen ist, scrollt nur noch das Bild im Hintergrund, während der Text ruhig stehen bleibt.

[joergsteinhauer]

Ja, das kann ich nachvollziehen, ist auch nicht wirklich user freundlich. Sollte auf jeden Fall gefixt werden.

Nur will ich verstehen, warum sich das JS so verhält, daher auch meine Frage: wie groß ist dein Bildschirm?

Gehe bitte auf https://www.mydevice.io/ und mache ein Screenshot von "Screen metrics":

Anscheinend funzt das JS so, dass es den Inhalt der PArallax-Box mittig ausrichtet, wenn diese Box mittig relativ zum Bildschirm liegt. Auf jeden Fall funzt das JS anders als im alten System.

[springers54]

[joergsteinhauer]

Ich brauche bitte doch die "SCREEN METRICS", weiter unten, die Boxen mit Rosa-Überschriften. Mir ist nicht nur die Breite wichtig.

[springers54]

[Dani2909]

[joergsteinhauer]

Ich bin dran am Parallax Problem. Das ist alles andere als einfach.... Bitte auf der Startseite den Block "Wir sind anders" nicht anfassen, da ist eine Baustelle.

Parallax ist derzeit global deaktiviert

[joergsteinhauer]

Ich muss fluchen, dieser Parallax-Effekt und dann noch in diversen Ausführungen und in unterschiedlichsten Konstellationen ist einfach mal zu komplex und ich fand kein Plugin, was diese tausend Fälle abdecken könnte und gleichzeitig performant wäre (ich versuche kein jQuery zu verwenden).

Deswegen sitze ich bereits Stunden an dem Problem. Habe es erstmal auf der Startseite implementiert und wollte es nun auf Kontakt-Seiten einbauen, da gibt es aber wiederum unerwartete Probleme.

Frage: ist dieser Effekt denn so wichtig? Braucht man das auf all den Seiten?

Bevor ich hier weiter Unmengen an Zeit investieren, muss ich sicher sein, dass wir auf dem richtigen Weg sind.

Parallax funktioniert weiterhin nur sporadisch.

[springers54]

bei uns funktioniert es gar nicht also wichtig ist es nicht. Schon gar nicht, wenn es unzuverlässig ist. Dann bin ich für konsequentes Weglassen im Sinne derzeitliches Effektivität

Das Hintergrundbild in Wir sind anders sollte aber da sein.

[joergsteinhauer]

Komisch. Bei mir gehts in chrome und Firefox, sollte auch sonst überall gehen.

Manchmal spinnt das JS etwas, da bin ich noch dran. Und der Cache macht auch Probleme. Bitte mal "hard refreshen", Anleitung für diverse Browser: https://www.getfilecloud.com/blog/2015/03/tech-tip-how-to-do-hard-refresh-in-browsers/#.XC5wRVxKhaR

Was genau funktioniert nicht?

Gibts es Fehler im Entwickler-Tool --> Console? Also Entwicklertool aufmachen (F12), dann unter "Console" schauen, was ausgegeben wird und ein Screenshot machen. Bei mir ist es so:

---

Wenns nicht so wichtig ist, würde ich das was ich bis jetzt gemacht habe, auch so lassen. Sprich - auf der Startseite den Parallax Effekt weiterhin lassen, dafür aber kein Parallax auf Kontaktseiten.

Übrigens, ist es meine Vermutung, dass u.a. Parallax im alten System die Seite so lahm gemacht hat.

[springers54]

Ich bin im FF und da geht es nicht

Kommt beim Scrollen auf der Seitee eein schwarzer Bereich, der zwar wegscrollt, aber häßlich ist. Im Crome der gleichee Effekt

Die Parallaxe kommt zwar, aber dieser Trauerbalken ist einfach nichts.

Also meine Eempfehlung: Effekt komplett weg und nr Hintergrundbild

[joergsteinhauer]

Ok, genau diese Art von Infos brauche ich - was genau nicht funktioniert. Der dunkle Balken - da passte einfach das Bild noch nicht ganz, ich habs mal aktualisiert, sieht jetzt gut aus.

Ich finde am Ende den Parallax Effekt ja nicht schlecht, man muss nur solche Sachen mit Vorsicht einbauen und sowas funktioniert auch nicht bei jeder möglichen Auflösung und mit jedem möglichen Inhalt - es ist zumindest in unserem Fall nicht so dynamisch. Würde man jetzt also z.b. mehr Kacheln einfügen, müsste man ggf. die Einstellungen für diese eine Parallax-box anpassen. Aber nun funktioniert es - und leider auch fast nur auf HD-Auflösung - also 1920x1080 und ähnlich.

Es ist hier also nötig, diesen Effekt nur bei bestimmten Auflösungen anzuschalten. Das muss ich noch optimieren.

Würde aber generell den Parallax-Effekt also schon lassen, das ist visuell ein Mehrwert, macht die Seite hübscher und moderner, nicht so langweilig. Und es wäre schade um die ganze Arbeit. Auf mobilen Geräten hätte ich den Effekt sowieso ausgestellt, das macht dort wenig Sinn, vor allem wegen der Performance.

[springers54]

also das Problem besteht nach wie vor

Auch wenn ich kein Freund von verschenkter Arbeit bin, wir haben wichtigere Baustellen als diese im Moment und wenn es nicht mal auf allen Geräten und Auflösungen geht, dann weg damit.

[joergsteinhauer]

Das Problem liegt eher doch noch an der Fenstergröße. Es gäbe hier eben den Weg, den Parallax-Effekt nur für 1920x1080px zu aktivieren.... Aber ich stoße auf weitere Probleme, die das Plugin an sich irgendwie mit bringt und da gibt es (für mich) leider keine ersichtliche Lösung. Das ist schon doof, kränkt mich bissel, weil ich da so viel Energie reingesteckt habe. Aber es nützt jetzt nichts, so können wir das nicht lassen - also müssen wir den P-Effekt leider komplett deaktivieren.

[joergsteinhauer]

Evtl. für spätere Nachforschungen:

Das Problem ist , dass das JS-Plugin https://github.com/erikengervall/parallax-vanilla einen Js-Fehler wirft, wenn die Bibo zwar eingebunden wird, aber kein Parallax-Element auf der Seite existiert bzw. kein Parallax gestartet wird.

Das "kein Parallax starten" passiert z.B. dann, wenn P-Effekt nur bei bestimmten Fenstergrößen starten soll und man mit mediaQueries im JS hantiert.

[springers54]

Ich verstehe deinen Frust nur zu gut. Aber manchmal ist ein Cut besser als weitere verpulverte Zeit.