(It should work together with the smooth scroll action at the same page and in best case as html text / respectively in a responsive layout)
Thanks a lot!
PS: My first ideas has been to play with “News Cycle Action”, Exhibeo slide or css slider (http://cssslider.com/ which unfortunatly does not work yet with the newest FF), but that is not entirely what I like. Just a big headline with one word to rotate.
the effect is virtually the same as the codrops script Thomas has pointed to. You would need to insert the script into your page, import the style code and then apply the proper styling to your html.
I don’t think you will succeed in centering your line of rotating text. The heading-- without the spans-- is rendered by the browser before any spans are added by the script. Thus, only the non-span portion of the text will be centered.
The way I get away with it is by using a short, short line of text for my heading and span text that is nearly identical in length. If you look close, it is off-center as well. The shortness of it all keeps it from looking awkward. If you look at most examples of this type of script, they are all left-justified.
Because Freeway no longer automatically styles Inflow Layout containers as position:relative; it will be important to add that style property to the container which the rotating text element is in.
If your heading text and/or span text are long, the span will expand outside it’s parent container until it finds a relatively positioned parent.
Also, if your heading is centered, you can left-justify the span element-- which keeps it flush at the end of the heading, should it break into a second line. Weird looking, but not as strange as centered within the span. Also also, I used a margin-left setting on the span instead of a text-indent… again for multiple lines.
I wanted to comment on this before I have to rush out for the evening…
I even made an Action based on the technique so I could do this easily without having to break out the calculator to work out the animation delays. I just need to figure out where I put it!