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