[Pro] WOW!

I guess peeps here had a quick look at the new imac - but did anyone notice the slick carousel they are using to show off the new desktop? A kinda multi layered thing that slides in at different increments…

Anyone know how to do this?


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

Oh, my. That is just sick! It’s using clear PNG image layers within
each pane, and independent animations applied to each of those. You
could very easily use Transition FX to do something like this once
only (at page load), but I’m not sure how you could hook it into
Carousel such that the “move between panes” event would trigger this
effect over again each time you navigated within the carousel itself.

Walter

On May 3, 2011, at 11:15 AM, Justin Easthall wrote:

I guess peeps here had a quick look at the new imac - but did anyone
notice the slick carousel they are using to show off the new
desktop? A kinda multi layered thing that slides in at different
increments…

iMac - Apple

Anyone know how to do 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

Interesting thanks - I’d love to be able to use this


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

There’s no direct Action way to do this, but it’s very simple to do
with Protaculous, the right photography, and a tiny bit of fiddling
with JS and a calculator.

http://scripty.walterdavisstudio.com/layered-slide

All I did was download Apple’s images[1], create a nested set of DIVs
for the images and their parent container (using drag and drop in the
Page pane) and then add two tiny JS functions through Protaculous. The
first one runs before the page is visible (dom:loaded callback):

 $('stage').select('div').invoke('setStyle','left:960px');

…and all that does is scoot all three images over to the right far
enough to be invisible. (The parent container, #stage, has its
Overflow attribute set to hidden, so all of its children are cut off
if they’re outside of its bounds.)

The second one runs after the page is completely downloaded (all
images are done loading, everything is in place and ready to move),
which is accessed through the lower of the two Function Body buttons:

 $('left').morph('left:-56px');
 $('middle').morph('left: 167px');
 $('right').morph('left:499px');

I did not do any sort of cleanup to this at all, just relied on the
defaults and the fact that each image had to travel a different
distance within the same time to get the layered reveal effect. If you
have the time, you can set various delay and duration attributes like
this:

 $('left').morph('left:-56px',{duration:0.6,delay:0.1});

…to fiddle with the timings and the nature of the effect. These
positions were just what looked good in Freeway; I wrote them down in
the design view, and then translated them into the Protaculous
Function Body window.

Walter

On May 3, 2011, at 11:34 AM, Justin Easthall wrote:

Interesting thanks - I’d love to be able to use 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

On May 3, 2011, at 12:21 PM, Walter Davis wrote:

All I did was download Apple’s images[1], crea

Forgot my footnote for Apple Legal:

  1. Please don’t sue me, I claim fair use for educational purposes, and
    don’t have time to go to court…

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

Great!!! I’m on the road but will be trying this out when back!!
I’ll post
Cheers


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

Not wanting to change the subject but Animatable looks very interesting to do this kind of animation

http://vimeo.com/22174448

David

On 3 May 2011, at 17:21, Walter Davis email@hidden wrote:

There’s no direct Action way to do this, but it’s very simple to do with Protaculous, the right photography, and a tiny bit of fiddling with JS and a calculator.


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

…it looks like it’s all done in CSS3 transformations

David

On 3 May 2011, at 20:29, David Owen email@hidden wrote:

Not wanting to change


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

I think would only work on webkit browsers not IE -


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

Apple does theirs with CSS3 if your browser supports it, and falls
back to JavaScript if you’re using IE. My example was pure JS, as I
haven’t tried any of the new CSS3 transforms yet. Might be a fun
project for a hot day later on.

Walter

On May 3, 2011, at 3:34 PM, David Owen wrote:

…it looks like it’s all done in CSS3 transformations

David

On 3 May 2011, at 20:29, David Owen
email@hidden wrote:

Not wanting to change


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

There are very funky slide effect utilities out there that can replicate this effect very well - some are free and easy to incorporate into Freeway sites.


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

Thanks could you point me to some?

Cheers


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

You beat me to the question…

J
On May 6, 2011, at 8:19 AM, Justin Easthall wrote:

Thanks could you point me to some?

Cheers


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