rotating text

Can someone or you Ernie give me a small hint please, how to achieve “rotating text”?

Seen on: http://cssway.thebigerns.com/

(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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Hanna,

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.

Cheers

Thomas

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Hanna, Have been trying the very thing was trying to find a way of getting to centre in markup. think might have to be a table.

if you would like a link to files let me know.

example below is with java but also have css example Thomas mentioned.

http://www.freewaytalk.net/thread/view/159508


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

##Hanna,

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.

Best of luck to you both


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Many thanks Ernie will keep my text short :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One last bit of advice on this subject…

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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;
http://www.plumb-design.com/
You can find the CSS for the animations here;
http://www.plumb-design.com/css/anim.css

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;
http://www.plumb-design.com/plugins/

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”?


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Thanks a lot!
Hanna


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options