Apple's Website Cool Detail

Discussion in 'Community Discussion' started by pepinillo2012, Jun 18, 2014.

  1. pepinillo2012 macrumors newbie

    Joined:
    Nov 6, 2007
    #1
    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.
     
  2. JohnLT13 macrumors 6502a

    JohnLT13

    Joined:
    Dec 9, 2012
    Location:
    Boston (aka Red Sox Nation)
  3. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
  4. Nermal, Jun 18, 2014
    Last edited: Jun 19, 2014

    Nermal Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    New Zealand
    #4
    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).
     
  5. Intell macrumors P6

    Intell

    Joined:
    Jan 24, 2010
    Location:
    Inside
    #5
    Clouds are moving for me. Kinda hard to notice, but they are moving.
     
  6. Aspasia macrumors 65816

    Joined:
    Jun 9, 2011
    Location:
    Halfway between the Equator and North Pole
    #6
    Chrome. Clouds moving nicely across the blue sky. Very cool.
     
  7. MisterKeeks macrumors 68000

    MisterKeeks

    Joined:
    Nov 15, 2012
    #7
    Proof! I recommend full screen/720p for maximum effect, it is very subtle.
     
  8. chown33 macrumors 604

    Joined:
    Aug 9, 2009
  9. firedept macrumors 603

    firedept

    Joined:
    Jul 8, 2011
    Location:
    Somewhere!
    #9
    Firefox and can clearly see clouds moving. Pretty cool!
     
  10. jeremysteele macrumors 6502

    Joined:
    Jul 13, 2011
    #10
    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;
    }
    
     
  11. Astroboy907 macrumors 65816

    Astroboy907

    Joined:
    May 6, 2012
    Location:
    Spaceball One
    #11

    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!
     
  12. Kryckter macrumors 6502

    Kryckter

    Joined:
    Mar 12, 2009
    #12
    Pretty neat, I thought my eyes were just playing tricks at first.
     
  13. AustinIllini macrumors demi-god

    AustinIllini

    Joined:
    Oct 20, 2011
    Location:
    Austin, TX
    #13
    Me too, but the clouds in the upper left corner are moving a lot, actually.
     

Share This Page