{"id":565,"date":"2013-06-10T12:00:05","date_gmt":"2013-06-10T12:00:05","guid":{"rendered":"https:\/\/www.taywa.ch\/blog\/?p=565"},"modified":"2014-07-02T09:59:00","modified_gmt":"2014-07-02T09:59:00","slug":"parallax-scrolling-tcm-akupunktur-website-typo3-helen-lyu-abt","status":"publish","type":"post","link":"https:\/\/www.taywa.ch\/blog\/typo3\/typoscript\/parallax-scrolling-tcm-akupunktur-website-typo3-helen-lyu-abt\/","title":{"rendered":"Parallax Scrolling f\u00fcr die TCM Akupunktur Website mit Typo3 von Helen Lyu Abt"},"content":{"rendered":"

F\u00fcr die TCM Therapeutin Helen Lyu Abt hat Taywa eine Akupunktur Website mit Parallax Scrolling Responsive Design programmiert. Die Seite \u00fcber Akupunktur und Moxibustion<\/a> verwendet grosse Hintergrundbilder f\u00fcr den Scrolling Effekt, welche \u00fcber das Media-Feld eingepflegt werden k\u00f6nnen:<\/p>\n

F\u00fcr Typo3 4.5-4.7<\/strong><\/p>\n

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

    30<\/span> =<\/span> TEXT<\/span><\/a>
\n    30<\/span>.<\/span>value =<\/span> ><\/span> |<\/span> <\/div><\/span>
\n}<\/span><\/div>\n

F\u00fcr typo3 6.0-6.2 (Danke f\u00fcr die L\u00f6sung an „Nathalie“ aus den Kommentaren)<\/strong><\/p>\n

 [<\/span>…<\/span>]<\/span>
\n20<\/span> =<\/span> FILES
\n    20<\/span> {<\/span>
\n    references {<\/span>
\n        table =<\/span> tt_content<\/span>
\n        uid.<\/span>data =<\/span> field<\/span> =<\/span> uid
\n        fieldName =<\/span> media
\n    }<\/span>
\n    renderObj =<\/span> TEXT<\/span><\/a>
\n    renderObj {<\/span>
\n        data =<\/span> file<\/span>:<\/span>current:<\/span>publicUrl
\n        wrap =<\/span> style=<\/span>"background-image:<\/span>url(<\/span> |<\/span> )<\/span>;"
\n    }<\/span>
\n}<\/span>
\n[<\/span>…<\/span>]<\/span><\/div>\n

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\u00e4nzen:<\/p>\n

t3lib_extMgm::<\/span>addToAllTCAtypes<\/span>(<\/span>
\n    ‚tt_content‘<\/span>,<\/span>
\n    ‚media‘<\/span>,<\/span>
\n    ‚text,textpic,html,image‘<\/span>,<\/span>
\n    ‚after:header‘<\/span>
\n)<\/span>;<\/span><\/div>\n

Der Effekt ist vor allem bei „Helen Lyu Abt<\/a>“ sehr wirkungsvoll.<\/p>\n

Im Geiste des Responisve Design wurden f\u00fcr die Inhalte Innenabst\u00e4nde (padding) in % angegeben – horizontal wie auch vertikal. Dadurch bekommen Inhaltselemente mit Karten wie TCM Stadt Z\u00fcrich<\/a> oder Akupunktur in Meilen<\/a> mehr Luft auf gr\u00f6sseren Bildschirmen. Zus\u00e4tzlich wurden Mediaqueries f\u00fcr gr\u00f6ssere Layoutspr\u00fcnge verwendet.<\/p>\n

Die Javascript L\u00f6sung f\u00fcr den Parallax Effekt kommt von:
http:\/\/ianlunn.co.uk\/articles\/recreate-nikebetterworld-parallax\/<\/p>\n","protected":false},"excerpt":{"rendered":"

F\u00fcr die TCM Therapeutin Helen Lyu Abt hat Taywa eine Akupunktur Website mit Parallax Scrolling Responsive Design programmiert. Die Seite \u00fcber Akupunktur und Moxibustion verwendet grosse Hintergrundbilder f\u00fcr den Scrolling Effekt, welche \u00fcber das Media-Feld eingepflegt werden k\u00f6nnen: F\u00fcr Typo3 4.5-4.7 \/\/ TS SETUP \/\/set cUID from default lang if content is translated tt_content.stdWrap.outerWrap.cObject =<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,101,44,4],"tags":[144,145,143,146],"class_list":["post-565","post","type-post","status-publish","format-standard","hentry","category-css","category-jquery-js","category-projekte","category-typoscript","tag-akupunktur","tag-parallax-scrolling","tag-responsive-design","tag-tcm"],"_links":{"self":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":8,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":568,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/posts\/565\/revisions\/568"}],"wp:attachment":[{"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taywa.ch\/blog\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}