Site Design: Scroll Effect on Apple's macOS Sierra Page (apple.com)
over 6 years ago from Kyle K, Sr Product Designer
over 6 years ago from Kyle K, Sr Product Designer
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.
I think these are co-ordinates for the objects in the scene:
What “Scroll Effect” do you mean? The Fade-In’s?
It's cool, except for the fact that I'm browsing the Apple website in Apple's browser in a top-of-the-line Apple computer—it's Apple all the way down the chain—and it's choking like crazy.
Ouch, that's too bad! For me it worked pretty well on my old 2009 Apple computer :)
I'm assuming you're in Chrome, though ;)
Nope, Safari on Mavericks. Not even outfitted with an SSD.
Although I'll be upgrading to one soon though, I do want to do other stuff with this computer than browsing a page about an OS that my computer is outdated for ;).
I've been on that website several times and I never noticed it until David Baker mentioned the parallax effect, so while cool indeed, it's not very effective, and it might have been better off as a timed animation like the ones they had for the Mac Pro.
This is really cool. It seems like there's a blur, zoom out, and parallax effect all synced up together. Really interesting.
Only works in Safari at this moment.
The effect is called Backdrop Filter.
Don't think that's it. Seems to work in FF, Chrome and Safari for me.
Edit: it's CSS3 2D Transforms, which is in use by many browsers.
So old…
This was first used in an iMac product page in 2014.
Personally, I think it's terrible. It's jittery and didn't even load the first time i tried in the latest version of safari. These concepts are fantastic in theory, but when you sacrifice the user experience for "pretty" concepts, you fail your customers.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now