Site Design: Scroll Effect on Apple's macOS Sierra Page(apple.com)

7 years ago from Kyle K, Sr Product Designer

  • David BarkerDavid Barker, 7 years ago (edited 7 years ago )

    When I first saw the site, I went into the source code to figure out how they achieved the effect with the mountains. At first, I thought it was a simple 2D parallax, but if you look closely, it's more of 3D effect.

    They're using Three.js and 3D models of the mountains with images of mountains as the texture.

    http://i.imgur.com/97FaLxj.png

    http://images.apple.com/media/ww/macos/2016/c1206bed-9b76-4c2c-ad65-d3647b9ebcbb/overview/hero/textures/mountains.jpg

    I think these are co-ordinates for the objects in the scene: http://i.imgur.com/qqWJwGk.png

    8 points