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…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:
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
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