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>
}

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( | );"
    }
}
[...]

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'
);

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/