Ergebnis 1 bis 35 von 35

Thema: Parallax scrolling in contao?

  1. #1
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard Parallax scrolling in contao?

    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

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.376
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  3. #3
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    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.

  4. #4
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    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.

  5. #5
    Contao-Fan Avatar von manfred
    Registriert seit
    08.05.2011.
    Ort
    Schwäbisch Gmünd
    Beiträge
    548

    Standard

    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.....
    Geändert von manfred (08.04.2014 um 13:09 Uhr)

  6. #6
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    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?

  7. #7

  8. #8
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

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

  9. #9
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    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

  10. #10
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    543

    Standard

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

    VG
    aadursun

  11. #11
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

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

  12. #12
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    543

    Standard

    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

  13. #13
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    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.

  14. #14
    Contao-Fan
    Registriert seit
    07.01.2011.
    Beiträge
    278

    Standard

    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.

  15. #15
    Contao-Fan Avatar von Bas
    Registriert seit
    03.12.2009.
    Ort
    Hamburg
    Beiträge
    555

    Standard

    Zitat Zitat von Steve_0 Beitrag anzeigen
    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.

  16. #16

  17. #17
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    Zitat Zitat von andreasisaak Beitrag anzeigen
    Aber das ist doch die erweiterung die was bei 450€ kostet, oder?

  18. #18
    Alter Contao-Hase Avatar von christian
    Registriert seit
    15.06.2009.
    Ort
    Viersen
    Beiträge
    1.038
    Partner-ID
    387

    Standard

    Zitat Zitat von Steve_0 Beitrag anzeigen
    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.
    Contao-Partner am Niederrhein
    Templating - Komplettservice - Erweiterungen
    Infos: http://delahaye.de

  19. #19
    Contao-Fan
    Registriert seit
    03.09.2013.
    Beiträge
    493

    Standard

    Das hier ist ein teil meines templates:

    PHP-Code:
    <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?

  20. #20
    Contao-Fan
    Registriert seit
    27.06.2010.
    Beiträge
    539

    Standard

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

  21. #21
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard Parallax Background JS / CSS Lösung unabhängig von Contao gesucht (nicht 100vh)

    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).

  22. #22
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    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

  23. #23
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    @lomex

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

    LG
    Bennie

  24. #24
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

    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.
    Angehängte Dateien Angehängte Dateien

  25. #25
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Das ist auch sehr interessant, werde ich mal ausprobieren

  26. #26
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

    Dürfte übrigens erst ab Contao 3.3 funktionieren.

  27. #27
    Contao-Fan Avatar von kos
    Registriert seit
    22.06.2009.
    Ort
    Westerwald
    Beiträge
    888

    Standard

    Hallo lomex,

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

  28. #28
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

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

  29. #29
    Contao-Nutzer
    Registriert seit
    31.05.2011.
    Beiträge
    91

    Standard

    @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

  30. #30
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

    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.

  31. #31
    Contao-Nutzer
    Registriert seit
    08.02.2013.
    Beiträge
    81

    Standard parallax mobil

    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

  32. #32
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

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

  33. #33
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    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...
    Geändert von Sukrams (17.08.2016 um 11:36 Uhr)

  34. #34
    Contao-Nutzer
    Registriert seit
    08.02.2011.
    Beiträge
    227

    Standard

    Zitat Zitat von lomex Beitrag anzeigen
    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:

    HTML-Code:
    <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:

    HTML-Code:
    <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

  35. #35
    Contao-Nutzer Avatar von Stetto
    Registriert seit
    28.10.2015.
    Ort
    Hürth
    Beiträge
    11

    Standard

    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?
    Softwareintegration und Consulting - JTL-Software

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •