CODEWITHSUNDEEP
html
Jim Perry
Jim Perry

Reputation: 1

how do I get this effect?

http://www.apple.com/why-mac/ has a cool little thing where you hover your cursor over the image and it scrolls upward to show hidden text.
I'm wanting to create a mockup with that same effect, where I have the mockup as one flat background image and then place the scrolling images on top of it.
Any ideas as to how I can do this?

Upvotes: 0

Views: 160

Answers (4)

Srikar Doddi
Srikar Doddi

Reputation: 15599

CSS Transitions?

(From the link above):

Transitions are specified using the following properties:

transition-property – What property should animate, e.g., opacity. transition-duration – How long the transition should last. transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function). transition – A shorthand for all three properties.

Here is a simple example:

div {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}

div:hover {
  opacity: 0;
}

Upvotes: 0

Marcus Adams
Marcus Adams

Reputation: 53830

Apple uses Scritaculous for that effect.

Upvotes: 0

Dave Swersky
Dave Swersky

Reputation: 34810

Looking into the source for the page (with Firefox/Firebug, by the way, which is awesome for this kind of reverse-engineering) I see that the javascript framework Scriptaculous is in use. Specifically, the BlindUp animation appears to be the one in use on that page.

Upvotes: 1

TheMagician
TheMagician

Reputation: 1856

You can do this with jQuery scrollable: http://flowplayer.org/tools/scrollable/

Upvotes: 2

Related Questions