Menu
I'm wondering how I could make a fade and slide effect like on: http://www.apple.com/stevejobs/
It's a really cool animation and I'm wondering if this is possible with jQuery?
Note: I already know how to fade in stuff. I use jQuery all the time. I want the effect where new comments/memories/thoughts drop down. It slides down and fades at the same time.
583
On the Transitions tab, under Transition to This Slide, click the transition that you want—Fade, for example. To vary the transition, such as the direction it moves on the screen, click Effect Options, and then select the variation you want.
On the slide, select the box that contains your text. On the Animations tab, select the Add Animation drop-down menu, and select an animation, such as Appear, Fade In, or Fly In. Select the Animations tab, and then select Animation Pane.
The fading is just some CSS they applied on an element:
From messages.css (line 81)
#messages #messageContainer #mask {
background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, #FFFFFF 92%, #FFFFFF 100%) repeat scroll 0 0 transparent;
bottom: 0;
height: 200px;
pointer-events: none;
position: absolute;
width: 100%;
z-index: 1;
}
and for the scrolling effect, it can be done easily with jQuery.
edit: the elements are not fading away, they're going behind an element which is a gradient from transparent to white
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
