[Pro] Special Rollover

How is it possible to make a rollover that looks like this?http://www.thetoshibatablet.com/
You can see the panes turn when you rollover. Im just trying to see if you can use freeway to make this.


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

That entire page is a Flash movie. But take a look at CSS3 Rollovers
from Tim Plumb, at ActionsForge. That will get you some amazing
animated rollover effects. They will only show their full effect in
Safari and Chrome on the desktop, but nearly all mobile browsers
(since WebKit dominates there).

Walter

On Jan 25, 2011, at 7:42 AM, Nate wrote:

How is it possible to make a rollover that looks like this?http://www.thetoshibatablet.com/
You can see the panes turn when you rollover. Im just trying to see
if you can use freeway to make this.


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


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

Ok thanks. I will take a look at that.
On Jan 25, 2011 8:03 AM, “Walter Lee Davis” email@hidden wrote:

That entire page is a Flash movie. But take a look at CSS3 Rollovers
from Tim Plumb, at ActionsForge. That will get you some amazing
animated rollover effects. They will only show their full effect in
Safari and Chrome on the desktop, but nearly all mobile browsers
(since WebKit dominates there).

Walter

On Jan 25, 2011, at 7:42 AM, Nate wrote:

How is it possible to make a rollover that looks like this?
http://www.thetoshibatablet.com/
You can see the panes turn when you rollover. Im just trying to see
if you can use freeway to make this.


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


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


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

Hi Nathan,
Unfortunately the CSS3 Rollovers action only handles transitions (2D animations) rather than the transformations (3D) of your example. WebKit browsers now support 3D transformations like this although setting them up is going to be a manual process. Here’s a simple example of a simple card-flip transformation that I hand coded that should work in Safari, Webkit and Chrome;
http://www.freewayactions.com/test/card-flip/

You won’t see this working on an iOS device as the effect uses hover states to flip the cards - something you can’t do on the iPhone, iPad etc.
I would suggest looking for either a Flash template or a jQuery/Scriptaculous/JS plug-in that gets you close to the effect you are after.
Regards,
Tim.

On 25 Jan 2011, at 13:05, Nathan Ander wrote:

Ok thanks. I will take a look at that.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Hello Tim,

This is a very nice example of the CSS3 Rollover you are showing here! I know that the CSS3 Rollover rotates clockwise and counter-clockwise, but in this example the vertical bars flip 180 and I assume you did it by a code you added as you said. Is there a way to achieve this same effect, maybe using the extended name and value or mark-up on the CSS3 Rollover, only with Freewayr?

Thanks in advance,

Marcus Do Carmo

On Jan 25, 2011, at 9:56 AM, Tim Plumb wrote:

Hi Nathan,
Unfortunately the CSS3 Rollovers action only handles transitions (2D animations) rather than the transformations (3D) of your example. WebKit browsers now support 3D transformations like this although setting them up is going to be a manual process. Here’s a simple example of a simple card-flip transformation that I hand coded that should work in Safari, Webkit and Chrome;
http://www.freewayactions.com/test/card-flip/

You won’t see this working on an iOS device as the effect uses hover states to flip the cards - something you can’t do on the iPhone, iPad etc.
I would suggest looking for either a Flash template or a jQuery/Scriptaculous/JS plug-in that gets you close to the effect you are after.
Regards,
Tim.

On 25 Jan 2011, at 13:05, Nathan Ander wrote:

Ok thanks. I will take a look at that.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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


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

Hello guys. Any ideas how to achieve this effect that Tim hand coded with the CSS3 Rollover on this card-flip transformation instead of the rotation? Is there a specific code we could enter on extend value or mark-up?

Thanks,

Marcus


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

I’ve created what has to be one of the dirtiest Freeway files I’ve worked with for a long while as an example of how to achieve this card flip effect in Freeway 5.5 Pro.
Here’s the demo and the Freeway 5.5 Pro document download link;
http://www.freewayactions.com/test/card-flip/

The effect requires a nested structure of divs all with certain class names and some with Freeway’s default inline styling removed as well as a healthy block of custom CSS. As an action this would all be a clean and effective workflow but at the moment it is very much a quick and dirty hack.

I’ll think about adding this effect to the existing CSS3 Rollover action (http://www.actionsforge.com/actions/view/152-css3-rollover) although this won’t happen for a while due to other commitments.
Regards,
Tim.

On 25 Jan 2011, at 17:22, Marcus Do Carmo wrote:

Hello guys. Any ideas how to achieve this effect that Tim hand coded with the CSS3 Rollover on this card-flip transformation instead of the rotation? Is there a specific code we could enter on extend value or mark-up?

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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

Dear Tim,

As always, that’s amazing! …Well…You call this one of the dirtiest Freeway files you have worked with, but it’s a a great work! Thank you so much for taking your time to, not just creating the effect, but also the good explanation to achieve it. I’ll follow it very carefully to use in a work I’m doing now. Very good!

Thanks again, Tim!
Marcus

On Jan 25, 2011, at 3:12 PM, Tim Plumb wrote:

I’ve created what has to be one of the dirtiest Freeway files I’ve worked with for a long while as an example of how to achieve this card flip effect in Freeway 5.5 Pro.
Here’s the demo and the Freeway 5.5 Pro document download link;
http://www.freewayactions.com/test/card-flip/

The effect requires a nested structure of divs all with certain class names and some with Freeway’s default inline styling removed as well as a healthy block of custom CSS. As an action this would all be a clean and effective workflow but at the moment it is very much a quick and dirty hack.

I’ll think about adding this effect to the existing CSS3 Rollover action (http://www.actionsforge.com/actions/view/152-css3-rollover) although this won’t happen for a while due to other commitments.
Regards,
Tim.

On 25 Jan 2011, at 17:22, Marcus Do Carmo wrote:

Hello guys. Any ideas how to achieve this effect that Tim hand coded with the CSS3 Rollover on this card-flip transformation instead of the rotation? Is there a specific code we could enter on extend value or mark-up?

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.

Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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


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