(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!
Hanna
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.
Ernie’s page is, (as far as I’m oriented) a WordPress so chances are, that this is kind of additional stuff (Plugin).
Basically I found this which looks into this direction:
I haven’t played with it or had a detailed look yet, but looks like classified spans with some css3 transitions. So I have currently no idea at all how to tackle.
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.
##Matt,
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…
Ernie’s site uses CSS transitions to animate the words and falls back to use jQuery in browsers that don’t support these effects. Even with the transitions handled by CSS the timing is all done using JavaScript to apply the styles to the elements that need animating.
I did a similar effect on my site a while ago but decided to just use CSS; both transitions and animation delays to stagger when the words appear;
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!
Regards,
Tim.
PS. If you use Pulse 4 check out the Pulse plugins I’ve made for the CMS;
On 4 Mar 2015, at 14:34, sonjanna wrote:
Can someone or you Ernie give me a small hint please, how to achieve “rotating text”?
Thanks Thomas, Ernie, Matt and Tim for your suggestions. All very interesting! This is what I was hoping for.
Tim, you mentioned that you use only css and even developed an action. Would it be reasonable to share it with us?
I did not find it at freewayactions.com.