Unten abgebildeten Spiegeleffekt kann man ganz einfach mit Typoscript und dem Javascript reflection.js realisieren. Download

Als Beispiel erstelle ich eine grafische Überschrift.

Zuerst binde ich oben genanntes Script mit Typoscript in den Html-Header ein:

page.includeJS.file1 = fileadmin/scripts/reflection.js

Dann verwende ich folgendes TS-Snippet um die Eigenschaften der Headline zu definieren. Wichtig ist das Hinzufügen der Klasse “reflect” mit params = class=”reflect” um den Effekt zu erzielen.

Header1 = IMAGE
Header1 {
wrap = |
params = class="reflect"
altText.field = title
file = GIFBUILDER
file {
XY = [10.w]+5,[10.h]-1
backColor = #000
transparentBackground = 1
10 = TEXT
10.text.field =
10.text.current = 1
10.fontSize = 24
10.offset = 0,19
10.text.case = upper
10.fontFile = fileadmin/fonts/impact.ttf
10.fontColor = #F4D100
10.niceText = 0
}
}

Mit diesem Prinzip lassen sich auch grafische Menüs (GMENU) mit einem Spiegeleffekt versehen.