ilch Forum » Allgemein » HTML, PHP, SQL,... » parallax scrolling

Geschlossen
  1. So. 12.04.2015 06:11 Uhr #1
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    Hi Zusammen hat schon jemand eine parallax scrolling seite mit ilch umgesetezt? würde mich über beispiele und bestpractices freuen
    0 Mitglieder finden den Beitrag gut.
  2. So. 12.04.2015 11:14 Uhr #2
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    Ja würde mich auch interessieren. lächeln
    0 Mitglieder finden den Beitrag gut.
  3. So. 12.04.2015 14:43 Uhr #3
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Sieht sehr aufwendig aus, viel Grafik spiel :/
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  4. So. 12.04.2015 14:45 Uhr #4
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    Naja je nach dem... im Grunde ist es nur die verschiebung von Elementen bzw. das mitscrollen - das muss nicht unbedingt eine Grafik sein. zwinker
    0 Mitglieder finden den Beitrag gut.
  5. So. 12.04.2015 14:50 Uhr #5
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Sieht zumindest sehr Interessant aus irgendwann versuch ich mal sowas hinzubekomen.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  6. So. 12.04.2015 19:09 Uhr #6
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    an sich ist es ja nicht komplex ... mich interessiert eher die verbindung mit ilch
    0 Mitglieder finden den Beitrag gut.
  7. So. 12.04.2015 20:02 Uhr #7
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Naja was heißt Verbindung, letztendlich könnte das eine große HTML Seite sein, bei der nix nachgeladen wird. Sinnvoller ist wohl aber erst beim Scrollen was nachzuladen, wie das geht hat mit ilch ja nicht wirklich viel zu tun, wie jeder andere Ajax Request auch.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    1 Mitglieder finden den Beitrag gut.
  8. Mo. 13.04.2015 08:39 Uhr #8
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    ja das ist soweit klar

    aber wie würde ich sinnvoll die ilch navigation weiternutzen? das ganze soll ja weiterhin übers backend gepflegt werden können.

    und wenn ich da zu viel hard coded nachlade aktionen per ajax mach wird das ja schon deutlich eingeschränkt
    0 Mitglieder finden den Beitrag gut.
  9. Mo. 13.04.2015 09:17 Uhr #9
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Du willst die Sachen, die Nachgeladen werden über die Navigation steuern oder wie?

    Dann könntest du zwar die Reihenfolge konfigurieren, aber nur eine einzige.

    Ich kann mir irgendwie keinen sinnvollen Anwendungsfall dafür vorstellen.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  10. Mo. 13.04.2015 09:38 Uhr #10
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    Naja also so als Konzept in Gedanken würde ich mich entscheiden, mache ich eine One Page oder ein Portfolio mit mehreren Seiten.

    Dementsprechend kommt dann die Funktion des parallax scrolling hinzu, soll es Nutzerführend sein oder nur zu Dekorationszwecken?

    Wenn es Nutzerführend sein soll, also von Seitenanfang bis Seitenende durchscrollt und an verschiedenen Haltepunkte, verschiedene Informationen optisch hervorhebt (Beispiel) würde ich es ausschließlich bei einer One Page einsetzen.
    Ansonsten würde ich es sehr dezent in Produktbeschreibungen oder Dienstleistungen einsetzen wie es z.B. Apple sehr gut umsetzt.

    Wenn es nur zu Dekorationszwecken eingesetzt wird, dann würde ich es nur an bestimmten Stellen einsetzen (Beispiel Slider, wobei zu viel für mein Geschmack).


    Zur ilch Umsetzung.


    One Page: Da sich alles auf einer einzelnen Seite abspielt werden grundsätzlich keine Romane und große Bilder ausgegeben, der Ladegeschwindigkeit zur Liebe - und um den Besucher nicht zu langweilen.
    Daher muss hier viel mit Boxen gearbeitet werden, SelfBoxes mit dynamischen Inhalt oder anderweitige Boxen die weitgehendst im Layout fest verankert sind.
    Die einzelnen Seitenabschnitte kann man dann z.B. mit einem On Scroll Header annavigieren.


    Portfolio: Hier kann man wie gewohnt alle Elemente von ilch im vollen Funktionsumfang einsetzen, muss sich aber entscheiden ob man parallax z.B. nur auf der Startseite im großen Stil einsetzt oder auf mehrere Unterseiten dezent (z.B. als Deko) einsetzt.



    Wenn ich parallax einsetze, würde ich es Anfangs ausschließlich zu Dekorationszwecke einsetzen damit der Fokus auf dem Seiteninhalt bleibt und nicht vom wesentlichen ablenkt. zwinker
    0 Mitglieder finden den Beitrag gut.
  11. Mo. 13.04.2015 20:16 Uhr #11
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Irgedwie vermischt Ihr hier 2 verschiedene Sachen die zwar auf der selben Technik beruhen können, aber vom aufwand her emenz auseinander gehen.

    Wenn man es mal genauer betrachtet, brauch beim Parallax scrolling nichts nachgeladen zu werden. Die Technik ist aus den anfängen der JumpNrun spielen bekannt. man hat mehrere hintergrund ebenen die man in unterschiedlichen geschwindigkeiten sich verschieben lässt. Einfachstes beispiel zb. einen Wolken oder Sternenhimmel.

    Was gerade bei Portfolios oder auch Firmenseiten gerne gemacht wird sind die bildwechsel auserhalb von kleinen sichtfenstern.
    Wo wir dann schon wieder bei Seiten sind, die im Onepage Design erstellt sind. Aber auch da begrenzt man bei anderen CMS die anzahl an Daten die auf einer Seite dargestellt werden.

    Das was hier aber schon teilweise fällt geht schon ehr in die richtung storylelling. Hier kommt zwar auch Parallax zum ensatz denoch ist der Aufwand dabei schon etwas ernormer.
    Dafür ist das endresultat aber, bei einer schicken geschichte und guter Umsetzung, richtig genial.

    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  12. Mo. 27.04.2015 13:14 Uhr #12
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    mobile-autowaesche-luebeck.de/

    Das dürfte solch eine Seite sein.

    Im prinzip habe ich eine start.php, das ist der Inhalt der großen HTML-Datei, die als Startseite oder OnePage-Design benutzt wird. Alle anderen Seiten lassen sich wie gewohnt über die im content-ordner zur Verfügung stehenden Dateien abrufen.
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  13. Mo. 27.04.2015 15:09 Uhr #13
    User Pic
    Ahrtas Moderator
    Registriert seit
    17.12.2007
    Beiträge
    2.368
    Beitragswertungen
    210 Beitragspunkte
    Habe mich zufällig gerade in Richtung Elektrofahrzeuge erkundigt und ein echt super Parallax/Storytelling Beispiel dabei gefunden vom Hersteller Tesla.

    Gefällt mir echt gut. lächelnYes


    Zuletzt modifiziert von Ahrtas am 27.04.2015 - 15:12:13
    0 Mitglieder finden den Beitrag gut.
  14. Mo. 27.04.2015 16:05 Uhr #14
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    Wers mag...

    ich bin kein so großer Fan von OnePage Templates, deswegen setze ich sowas auch nur für Kunden um.

    Was mir aber an der Parallex-Technologie reizt ist der Slider, mit dem kann man was anfangen:

    externer Link
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  15. Mo. 27.04.2015 17:19 Uhr #15
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Ich finde die Seite von Tesla sehr geil. Yes
    0 Mitglieder finden den Beitrag gut.
  16. Mo. 27.04.2015 19:18 Uhr #16
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Hier mal eine Seite die gleich mehrere themen abdeckt, der ein oder andere kennt sie bestimmt.
    Flat Design / Real Design Storytelling Kombiniert mit Parallax

    externer Link


    und hier noch ein wenig Parallax gepaart mit animation

    externer Link
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten