Es gab früher mal den Testshop3 bei dem in einem Container ein parallax Bild gescrollt wurde. Hierbei scrollt der Seitencontent schneller als der Inhalt im Bildcontainer. Gibt es hierfür eine einfache Lösung wie man sowas auf seiner Seite einbinden kann? Im Zweifel muss ich in einen Usermod Ordner eine *.js einfügen und das mit Css aufrufen, nur welches und wie? Es ist ein Gambio 4 mit Honeygrid Theme... Liebe Grüße Tobi
Bootstrap benutzt Gambio ja. Habe also hier: https://mdbootstrap.com/docs/jquery/css/parallax/ ein ziemlich simples Beispiel. Dazu müsste dazu eigentlich das hier an HTML html: <main> <div data-jarallax data-speed="0.02" class="jarallax"> <img class="jarallax-img" src="https://mdbootstrap.com/img/Photos/Others/img (44).jpg" alt=""> Your content here... </div> </main> und das hier an js: // object-fit polyfill run objectFitImages(); /* init Jarallax */ jarallax(document.querySelectorAll('.jarallax')); jarallax(document.querySelectorAll('.jarallax-keep-img'), { keepImg: true, }); schon ausreichen. Wohin mit dem *.js? Es gibt ja keinen usermod ordner mehr im GX4? Dank euch
in GX-Modules: (Link nur für registrierte Nutzer sichtbar.) oder in dein eigenes Child-Theme (Link nur für registrierte Nutzer sichtbar.)
Ah habe meinen Fehler gefunden... MdBootstrap ist gar nicht Bootstrap... Da kann es so easy wohl nicht laufen. Das mit Modulen und json undundund hat mich dann doch überfordert. (TLDR) Fertige Lösungen zu kaufen für GX4 gibt es wohl noch nicht? Schreibt mir wer sowas? LG Tobi
Es gab etwas von Netdexx / xycons - aber der Designer ist noch nicht wieder gesund und somit gibt es derzeit da keine Templates. Eventuell könntest Du das letzte Testsho-3 - Template aus dem Forum runterladen und mal darin schauen, wie das da eingefügt ist.
Die Idee mit den netdexx-/xycons-Themes hatte ich auch. Ich hab mir eines der "Parallax"-Themes gekauft, nur um dann nach der Installation festzustellen, dass auch dort die Parallaxe nicht mehr funktioniert. Konfrontiert damit kam von xycons die Information, dass "das seit über einem Jahr nicht mehr funktioniert" und "bisher noch keinen Kunden gestört hat" Dass das dann aber eine in meinen Augen irreführende Artikelbeschreibung ist, ist dann auch auf kein Verständnis gestoßen. Also, Vorsicht, da steht zwar "Parallax" drauf, es ist aber kein Parallax drin!
Vielleicht hilft Tobi das hier weiter? https://www.w3schools.com/howto/howto_css_parallax.asp https://depot43.ch/unterlagen/microcss/parallax-scrolling/parallax-und-bootstrap/
Auch diese Codes könnten weiterhelfen. Ganz ohne Java. Codes kopieren und in Gambio testen. (ich selbst habe nicht getestet). https://codepen.io/pixeltot/pen/ByzpRy
Ja, das habe ich. Einfach ein Hintergrundbild hinter ein Widget (Sektion) legen, auf Fixed stellen und sich wundern. Die zu sehende Größe resultiert aus der Größe des Widgets. Also im Zweifel noch ein paar Breaks mit rein für die Höhe.
Update zu dem Thema: Der originale parallax-Mechanismus aus dem DemoShop3 funktioniert auch weiterhin (aktuell getestet in 4.4 und 4.5), sofern man die (bereits vor längerem notwendig gewordene und) im Forum unter (Link nur für registrierte Nutzer sichtbar.) beschriebene und herunterladbare gefixte Version der parallax.js verwendet. Der Fix in der general.js dürfte hinfällig sein. Ich hab den damals im template-basierten Shop einbauen müssen, aber jetzt in den themes wird diese js gar nicht mehr vorhanden sein. Dann die parallax.js aus dem alten Template in den entsprechenden Theme-Ordner kopieren und dann funktioniert das eigentlich direkt, sofern die für die parallax notwendigen Attribute gesetzt sind (die kann man sich im alten Template anschauen, das sind die Elemente mit .parallax-window und drum herum. Wichtig ist das data-image-src="images/content/index/....jpg", das das Bild definiert, das dem parallax-Hintergrund-Effekt unterliegt. Wichtig ist bei einer neuen Verwendung nur, dem oberhalb dem Element mit der parallaxe liegenden Element die Attribute "position: fixed", "absolute", oder "relative" zu geben, weil "z-index" sich nur auf mit diesen Attributen positionierte Elemente auswirkt, sowie einen z-index von mindestens 2. Damit habe ich dann mein altes DemoShop3-Template-basiertes Design in ein Theme migriert. Dazu war schon einiges an Umbauarbeiten notwendig, aber es geht. Im Wesentlichen hab ich aber einfach die alten Parallax-Bereiche rausgeschmissen und neue Bereiche auf der obersten Elemente-Ebene eingeführt. Letztlich sollte es aber bezüglich parallax wurscht sein, das hatte eher Gründe aus Richtung Übersichtlichkeit und Einfachheit. Die Parallaxe kann eigentlich beliebig eingebaut werden.