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

// TS SETUP 
//set cUID from default lang if content is translated
tt_content.stdWrap.outerWrap.cObject = COA
tt_content.stdWrap.outerWrap.cObject{
	10 = TEXT
	10 {
		insertData = 1
		value = <div id="c{field:l18n_parent}" class="contwrap" 
		override = <div id="c{field:uid}" class="contwrap" 
		override.if.isFalse.field = l18n_parent
	}
	20 = TEXT
	20 {
		field = media
		stdWrap {
			//insertData = 1
			required = 1
			wrap = style="background-image:url(/uploads/media/ | );"
		}
	}

	30 = TEXT
	30.value = > | </div>
}

// TS SETUP

//set cUID from default lang if content is translated

tt_content.stdWrap.outerWrap.cObject = COA

tt_content.stdWrap.outerWrap.cObject{

10 = TEXT

10 {

insertData = 1

value = <div id="c{field:l18n_parent}" class="contwrap"

override = <div id="c{field:uid}" class="contwrap"

override.if.isFalse.field = l18n_parent

}

20 = TEXT

20 {

field = media

stdWrap {

//insertData = 1

required = 1

wrap = style="background-image:url(/uploads/media/ | );"

}

30 = TEXT

30.value = > | </div>

}

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

 [...]
20 = FILES
    20 {
    references {
        table = tt_content
        uid.data = field = uid
        fieldName = media
    }
    renderObj = TEXT
    renderObj {
        data = file:current:publicUrl
        wrap = style="background-image:url( | );"
    }
}
[...]

[...]

20 = FILES

20 {

references {

table = tt_content

uid.data = field = uid

fieldName = media

}

renderObj = TEXT

renderObj {

data = file:current:publicUrl

wrap = style="background-image:url( | );"

}

[...]

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:

t3lib_extMgm::addToAllTCAtypes(
	'tt_content',
	'media',
	'text,textpic,html,image',
	'after:header'
);

t3lib_extMgm::addToAllTCAtypes(

'tt_content',

'media',

'text,textpic,html,image',

'after:header'

);

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/

Netter Effekt 😉

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

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

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

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

@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

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

@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

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

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

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

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

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

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

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

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

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

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

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

Netzkompetenz