Parallax scrolling in contao?

[Steve_0]

Hi,

ist es möglich so etwas wie diese seite in contao nach zu bauen:
http://getfleck.com/

Allerdings so zu bauen, dass es im backend leicht zu pflegen und zu erstellen geht (kaum html kenntnisse vorhanden)?
Wie teilt man sich das denn alles ein?

LG

[lucina]

Empfehlenswert ist sicher http://www.contao-parallax.com/. Allerdings nicht umsonst.

Ganz ohne HTML-Kenntnisse wirst Du da in keinem Fall weiterkommen - Du musst ja schließlich die Optionen verstehen. Wobei das, was Du da anführst, genau genommen kein Parallax ist sondern ein One-Pager.

[Steve_0]

Soll ja auch für einen one pager dann sein.
Naja das erstellen des templates würde ich machen, mir geht es nur darum, dass es relativ leicht zu pflegen ist.

Wollte es versuchen mit den standart contao mitteln und jquery zu bauen und 450 euro ist mir auch etwas zu teuer.

[andreasisaak]

Du kannst das auch komplett ohne Extension in Contao umsetzen, das ist für Leute mit dem entsprechendem Know-How gar kein Problem. Aber leicht zu pflegen wird das nicht sein Der Redakteur müsste schon sehr genau wissen was er tut. Daher wurde ja auch die Extension entwickelt. Aber schau mal hier im Forum bisschen nach Parallax, es gab schon entsprechende Threads wo einige Links und Scripte gesammelt wurden.

[manfred]

Oder diese Erweiterung....den Leistungsumfang zwischen den beiden Erweiterungen musst Du natürlich selbst vergleichen:
http://www.contao-parallax-slider.de/

lg manfred

Edit: Sehe gerade scrolling is gesucht, habe Slider verlinkt, vielleicht bringt ja doch was.....

[Steve_0]

Hab jetzt nur das gefunden:
https://community.contao.org/de/show...arallax+scroll

Weis aber noch nicht wie ich es in meiner fe_page bzw wie ich es mit artikeln und co mache, also der aufbau?

[aadursun]

Hier einige weitere Beispiele:

https://github.com/markdalgleish/stellar.js

http://css.dzone.com/articles/cool-p...rolling-effect

http://stephband.info/jparallax/

http://codepen.io/irony/full/gIhky (only CSS)

http://blog.palominolabs.com/2012/10...ing-only-css3/ (only CSS)

http://ihatetomatoes.net/how-to-crea...lling-website/


VG
aadursun

[Steve_0]

Wie bau ich aber die seiten, der zu scrollende hintergrund und navigation am einfachsten auf im backend?

[Steve_0]

Im anhang findet ihr meine struktur, im "stage" bereich habe ich ein inhaltselement "bild" wie kann ich dieses bild nun verschoben mit scrollen lassen wie im beispiel hier:
http://getfleck.com/

10-04-2014 12-15-20.jpg

[aadursun]

Schau mal bitte hier; alles Schritt für Schritt erklärt
http://ianlunn.co.uk/articles/recrea...orld-parallax/

VG
aadursun

[Steve_0]

Das problem ist doch aber, durch den inhaltstyp "bild" wird das jeweilige bild nicht als "background-image" eingefürgt sonder als "img".

[aadursun]

Willst du die Parallax Hintergründe ständig ändern; oder dem Kunden die Option geben, die Bilder selber auszuwählen; sonst kannst du die Bilder doch fix vorbelegen?

VG
aadursun

[Steve_0]

Hier bei geht es meist um eine one pager landingpage, die immer nur das intro bild parallax scrollen lässt und dafür würde ich halt auch gerne den inhaltstyp bild weiter verwenden ohne noch am template für diesem inhaltstyp rum zu bauen.

[mj1985]

Ich benutze aktuell Stellar in Verbindung mit der semantic_html5 Erweiterung.
Die Background-Bilder habe ich an die IDs per CSS verknüpft. Sicherlich für Redakteure nicht ganz so komfortabel, aber man erkennt die Textboxen im Backend noch ganz gut.

[Bas]

Hier bei geht es meist um eine one pager landingpage, die immer nur das intro bild parallax scrollen lässt und dafür würde ich halt auch gerne den inhaltstyp bild weiter verwenden ohne noch am template für diesem inhaltstyp rum zu bauen.

Wenn Du das Bild-Element nutzen willst, aber ne Background-Grafik brauchst, wirst Du wohl oder übel ans Template müssen .. sollte aber recht einfach sein. Setz im Bild-Element ne passende Klasse (z.B. "intro") wenn Du die alternative Ausgabe haben möchtest .. und abhängig davon ob die Klasse gesetzt ist, änderst Du die Ausgabe im Template. So funktioniert auch die reguläre Benutzung des Bild-Elements weiterhin ohne Probleme.

[andreasisaak]

Oder man nutzt sowas:

http://menatwork.github.io/parallax-...figuration.png

[Steve_0]

Oder man nutzt sowas:

http://menatwork.github.io/parallax-...figuration.png

Aber das ist doch die erweiterung die was bei 450€ kostet, oder?

[christian]

Aber das ist doch die erweiterung die was bei 450€ kostet, oder?

... und jetzt ist auch klar, warum. Weil sie im Zweifel mehr als 450,- an Zeit/Budget/Beruhigungsmitteln einspart.

[Steve_0]

Das hier ist ein teil meines templates:

<div id="main">
        <div class="inside">
            <div id="content">
                <?php echo $this->main; ?>
                <div class="clear"></div>
            </div>
            
               <?php if ($this->right): ?>
                <aside id="sidebar_right">
                    <div class="inside_sidebar">
                        <?php echo $this->right; ?>
                    </div>
                </aside>
            <?php endif; ?>
            <div class="clear"></div>
        </div>

Nun würde ich es gerne so handhaben, wenn die "sidebar_right" nicht da ist, bekommt das div mit der id "content" noch eine zusätzliche classe "full", wie kann ich das bewerksteligen?

[tl_richard_user]

<?php if (!$this->right): ?> full<?php endif; ?>

[lomex]

Bin auch auf der Suche nach eine sauberen Lösung, um bestimmte Inhalte mit einem Parallax Effekt zu versehen, die auch auf iOS funktioniert. Idealerweise rein CSS basiert, JS geht aber auch. Also wie hier. Rein optisch betrachtet. Ob die Lösung mit img oder background-image arbeitet, ist mir egal.

Das Problem an der o.a. Lösung ist extremes Ruckeln auf dem iPhone. Und das Script hat schlappe 90kb. Etwas viel.

Die Lösung von Keith Clar (Link) scheint nur für eine Höhe von 100vh zu funktionieren. Alle Versuche, die Höhe auf z.B. 300px einzustellen, scheiterten.

Diese Lösung von Minimit macht eigentlich das, was ich will, nur eben nicht auf iOS.

Die Links hier im Thread erfüllen meiner Meinung nach meine Anforderungen alle nicht. Hat jemand zufällig noch ein Plugin, welches er aus dem Hut zaubern kann? Wie gesagt, muss nichts mit Contao zu tun haben, baue da selbst ein Inhaltselement draus (und stelle es bei Bedarf online).

[Bennie]

Ich habe es leider noch nicht ausprobiert aber vielleicht ist das was für Dich:
http://pixelcog.github.io/parallax.js/

Darauf gestoßen bin ich durch diesen Thread.
der in dem Zusammenhang bzgl. der Umsetzung auch interessant ist.

LG
Bennie

[Bennie]

@lomex

Wofür hast Du Dich letztendlich entschieden oder evtl. das Ganze verworfen??

LG
Bennie

[lomex]

Das Script von Pixelcog hatte ich auch gesehen, aber aufgrund eines Tipps von Stefan Preiss habe ich mich für das UIKit entschieden.
Das Modul läuft. Ist aber noch nicht im Detail getestet. Habe es zum Spielen mal angehängt.
Im Artikel kann ein Hintergrund definiert werden. Im Inhaltselement (jedes) wie auch im Artikel können durch entsprechende Einstellungen Parallax-Effekte eingestellt werden.
Wie die so funktionieren, sieht man im o.a. Link.

[Bennie]

Das ist auch sehr interessant, werde ich mal ausprobieren

[lomex]

Dürfte übrigens erst ab Contao 3.3 funktionieren.

[kos]

Hallo lomex,

ich habe nur mal kurz den Code angeschaut, daher die Frage: fehlt in deinem Modul nicht der Ordner elements ?

[lomex]

Nein. Der fehlt nicht :-)
Alle Inhaltselemente können per Parallax beeinflusst werden. Es bedarf keines eigenen Inhaltselements.

[savuti]

@lomex: Ui das sieht ja richtig gut aus. Vielen Dank für das Paket. Darf man sich Hoffnung machen, dass das mal über die Paketverwaltung installierbar wird?

Viele Grüße,
Christian

[lomex]

Ja. Hoffnung kann man sich immer machen...
Erstmal kommt es ins Repository. Dann schaue ich mir mal den Composer an.
Bin aber erstmal im Projektstress.

[manoelo]

Hallo Iomex
funktioniert das ganze auch mobil
ich habe das modul mal installiert.. funktioniert bei mir auf dem handy leider nicht hinetrgründe werden rießig dargestellt
manoelo

[lomex]

Das Modul läuft eigentlich auch mobil. Hast Du mal einen Link?

[Sukrams]

Ich wollte das mal testen, aber bei mir tut es nichts, muss man da noch irgendwas einstellen/aktivieren? Ich habe für die Hintergrundanimation testweise einen Wert von -200 eingestellt Man sollte auch jQuery aktivieren...

[Sukrams]

Das Script von Pixelcog hatte ich auch gesehen, aber aufgrund eines Tipps von Stefan Preiss habe ich mich für das UIKit entschieden.
Das Modul läuft. Ist aber noch nicht im Detail getestet. Habe es zum Spielen mal angehängt.
Im Artikel kann ein Hintergrund definiert werden. Im Inhaltselement (jedes) wie auch im Artikel können durch entsprechende Einstellungen Parallax-Effekte eingestellt werden.
Wie die so funktionieren, sieht man im o.a. Link.

Mir ist da noch ein Fehler im Template aufgefallen: Im div werden die Klassen und Ids ineinander vertauscht, sodass es da ein ziemliches Kuddelmuddel gibt und dann auch kein gültiges HTML mehr ist. Das Problem liegt darin, dass im mod_article_parallax-Template ein Anführungszeichen hinter der Klasse vergessen wurde und die ID ansich nicht vergeben mehr vergeben wird:

<div data-uk-parallax="<?=$strParams;?>" class="<?= $this->class ?> <?= $this->cssID ?> style="background-image:url('<?= \FilesModel::findByUuid($this->backgroundimage)->path; ?>');<?php if($this->minheight != ""): ?>min-height: <?= $this->minheight; ?>;<?php endif; ?><?php if($this->setbackgroundcolor): ?>background-color: #<?=$this->backgroundcolor; ?><?php endif; ?><?= $this->style ?>">

Ich habe das ganze bei mir mal folgendermaßen gefixt:

<div data-uk-parallax="<?=$strParams;?>" class="<?= $this->class ?>" style="background-image:url('<?= \FilesModel::findByUuid($this->backgroundimage)->path; ?>');<?php if($this->minheight != ""): ?>min-height: <?= $this->minheight; ?>;<?php endif; ?><?php if($this->setbackgroundcolor): ?>background-color: #<?=$this->backgroundcolor; ?><?php endif; ?><?= $this->style ?>" <?= $this->cssID ?>>

Viele Grüße
Markus

[Stetto]

Hi, ich konnte das simple-parallax nach etwas hin und her installieren und es funktioniert auch.

Ich habe allerdings ein Template von Rocksolid im Einsatz und simple-parallax implementiert sich nur in die Contao-Standardfunktionen.

Wie kann ich die Erweiterung dazu überreden, sich auch die zusätzliches Custom Elements einzunisten?