Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Apple's Website Cool Detail

P

pepinillo2012

macrumors newbie
Original poster
Nov 6, 2007
7
0
Hi

Cool detail on the Yosemite preview page:

The clouds on the background move. True story. Best noticed on the top right/left edges.

*you probably need the latest version of your browser.
 
Not moving for me (SeaMonkey 2.26.1).

Edit: Working at home (Safari 7.0.4).

Edit 2: IS working in SeaMonkey; I was looking in the wrong place (the clouds in the top corners don't move).
 
Last edited:
Yeah, it's super subtle. For whatever reason it's easier for me to see on Safari than Chrome - different color rendering?

Looks like its using CSS transitions is all:

Code: 
.page-overview .bg-wrapper .clouds.show-clouds {
opacity: .75;
-webkit-transition-property: opactiy;
transition-property: opactiy;
-webkit-transition-duration: 5s;
transition-duration: 5s;
background-image: url(http://images.apple.com/osx/preview/images/overview_hero_clouds.png);
-webkit-animation: cloudAnim 160s linear infinite;
animation: cloudAnim 160s linear infinite;
}
 
jeremysteele said:
Yeah, it's super subtle. For whatever reason it's easier for me to see on Safari than Chrome - different color rendering?

Looks like its using CSS transitions is all:

Code: 
.page-overview .bg-wrapper .clouds.show-clouds {
opacity: .75;
-webkit-transition-property: opactiy;
transition-property: opactiy;
-webkit-transition-duration: 5s;
transition-duration: 5s;
background-image: url(http://images.apple.com/osx/preview/images/overview_hero_clouds.png);
-webkit-animation: cloudAnim 160s linear infinite;
animation: cloudAnim 160s linear infinite;
}
Click to expand...


Nice! Gotta love CSS3.

Set the animation to 5s in Developer Tools and you can really see the animation. Pretty smooth Apple, and ridiculously simple!
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back