Netzkompetenz

Blog mit Snippets, Tipps und Tricks rund um Webprogrammierung der Taywa aus Zürich

Parallax Scrolling für die TCM Akupunktur Website mit Typo3 von Helen Lyu Abt

Für die TCM Therapeutin Helen Lyu Abt hat Taywa eine Akupunktur Website mit Parallax Scrolling Responsive Design programmiert. Die Seite über Akupunktur und Moxibustion verwendet grosse Hintergrundbilder für den Scrolling Effekt, welche über das Media-Feld eingepflegt werden können:

Für Typo3 4.5-4.7

Für typo3 6.0-6.2 (Danke für die Lösung an „Nathalie“ aus den Kommentaren)

Damit das media Feld dann auch im Backend bei den Text, Text mit Bild, und Bilder Inhalten erscheint, muss man noch die extTables.php ergänzen:

Der Effekt ist vor allem bei „Helen Lyu Abt“ sehr wirkungsvoll.

Im Geiste des Responisve Design wurden für die Inhalte Innenabstände (padding) in % angegeben – horizontal wie auch vertikal. Dadurch bekommen Inhaltselemente mit Karten wie TCM Stadt Zürich oder Akupunktur in Meilen mehr Luft auf grösseren Bildschirmen. Zusätzlich wurden Mediaqueries für grössere Layoutsprünge verwendet.

Die Javascript Lösung für den Parallax Effekt kommt von:
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

Autor: am
Themen: CSS / jQuery / Projekte / TypoScript
Stichworte: / / /
  1. Netter Effekt 😉

    Kommentar by Gerrit — 12. November 2013 @ 20:48

  2. Wie??
    Bei mir statt Bildname steht einfach 0 oder 1, so:
    style=“background-image:url(/uploads/media/0);“

    Kommentar by Annlov — 6. Februar 2014 @ 15:47

  3. Und noch Frage: wie bekomme ich für jedes Element eigene Bildhintergrund?

    Kommentar by Annlov — 6. Februar 2014 @ 16:32

  4. @Annlov: Hast du die extTables.php angepasst und erscheint das media Feld im Backend bei den Inhalten?

    Kommentar by Roman Abt — 6. Februar 2014 @ 16:59

  5. 2Roman
    ja, das habe ich schon. Und damit kann ich für Inhaltselement ein Media-Element zuweisen.

    aber damit

    field = media
    stdWrap {
    //insertData = 1
    required = 1
    wrap = style=“background-image:url(/upload/media/ | );“
    }

    kriege ich immer erstes Bild weil das Media-Feld = 1 und nichts, wenn Media-Feld = 0

    Wie kriege ich jetzt dieses Media-Bild als Background für dieses Inhaltselement?

    Kommentar by Annlov — 7. Februar 2014 @ 10:10

  6. @Annlov: wenn du dir direkt die datenbank anschaust: was steht denn in der „tt_content“ tabelle im feld „media“ drin, nachdem du im backend ein bild hinzugefügt hast?

    …bei mir ist da der bildname als string und dieser kommt dann auch in’s html des templates rein.

    Kommentar by Roman Abt — 7. Februar 2014 @ 10:18

  7. 2Roman
    das ist das Problem, weil bei mir steht 1 für die Elementen, wo ich ein Media-Element hinzugefügt habe

    Kommentar by Annlov — 7. Februar 2014 @ 10:32

  8. ha, wahrscheinlich liegt es deswegen, das ich typo3 6.1 nutze…

    Kommentar by Annlov — 7. Februar 2014 @ 10:39

  9. ja, das stimmt. in 6.x ist das mit den files ganz anders gelöst. dafür müsste man das typoscript komplett umbauen.

    Kommentar by Roman Abt — 7. Februar 2014 @ 14:09

  10. Hallo,
    wurde nun eigentlich der Code für die Version 6.1 angepasst? Das wäre wirklich hilfreich. Desweiteren habe ich mal getestet, einfach per firebug ein Bild zu platzieren. Aber wenn ich scrolle dann zeigen sich im Quelltext keine background-positions an.. es scrollen nur die Bilder hoch und runter.. Kannst du mir das erklären?

    Kommentar by Nathalie — 25. Juni 2014 @ 07:25

  11. TS
    leider habe ich die TCM/Akupunktur seite noch nicht auf typo3 6.2 upgedated und musste darum auch das typoscript noch nicht anpassen.
    JS
    im firebug auf den „div.contwrap“ tags sieht man, wie das js den inline-style „background-position“ verändert. dazu muss man natürlich die „parallax()“ funktion auf den elementen initialisieren.

    Kommentar by Roman Abt — 25. Juni 2014 @ 08:01

  12. Ok – danke für den Hinweis zum TS…
    Können Sie mir denn sagen wie Sie das parallax initialisiert haben?

    Kommentar by Nathalie — 25. Juni 2014 @ 08:18

  13. parallax ist ein jquery plugin und ist nicht abhängig von typo3. download unter:
    http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
    und dann im html einbinden (pfad anpassen!) mit:
    <script src="jquery.parallax-1.1.3.js" type="text/javascript"></script>

    Kommentar by Roman Abt — 25. Juni 2014 @ 08:24

  14. Achso – ja das hatte ich schon gemacht. Funktioniert leider nicht…

    Kommentar by Nathalie — 25. Juni 2014 @ 08:49

  15. Könnten Sie eventuell ein TS für Typo3 6.1 erstellen? Das würden wir natürlich bezahlen.

    Kommentar by Nathalie — 25. Juni 2014 @ 09:35

TrackBack URL

Hinterlasse einen Kommentar, wir freuen uns über jedes Feedback.