netzkompetenz

Snippets, Tipps und Tricks rund um Webprogrammierung der taywa gmbh 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/

Posted by: on
Filed under: CSS,jQuery,Projekte,TypoScript

15 Comments »

  1. Netter Effekt 😉

    Kommentar von 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 von Annlov — 6. Februar 2014 @ 15:47

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

    Kommentar von 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 von 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 von 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 von 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 von Annlov — 7. Februar 2014 @ 10:32

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

    Kommentar von 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 von 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 von 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 von 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 von 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 von Roman Abt — 25. Juni 2014 @ 08:24

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

    Kommentar von 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 von Nathalie — 25. Juni 2014 @ 09:35

RSS feed for comments on this post. TrackBack URL

Leave a comment