How is this very cool webpage effect accomplished?

[oboe]

Was doing some poking around after seeing a couple of videos about guys who create "Hackintosh" computers using their own PC builds and installing Mac OS on them, and found this incredible web effect on Apple's Mac OS Sierra webpage.   

Scroll down on this page, using the mouse wheel or the scroll bar and watch what happens:

https://www.apple.com/macos/sierra/


How do you do that in html?  Is that a plugin effect?

[Serenity]

Was doing some poking around after seeing a couple of videos about guys who create "Hackintosh" computers using their own PC builds and installing Mac OS on them, and found this incredible web effect on Apple's Mac OS Sierra webpage.   

Scroll down on this page, using the mouse wheel or the scroll bar and watch what happens:

https://www.apple.com/macos/sierra/


How do you do that in html?  Is that a plugin effect?

Holy hell that's cool!

[Skuzzy]

Apparently my security is cranked too high as I did not see anything, but a scrolling page.

[Slade]

Apparently my security is cranked too high as I did not see anything, but a scrolling page.

Ditto.

[Lusche]

Apparently my security is cranked too high as I did not see anything, but a scrolling page.

And there I was, wondering what I'm missing 

[alkali]

I reckon it's right at the top of the page, when you scroll down the picture in the background comes into focus and then if you continue scrolling down you seem to be zooming out from the screen of a MacBook. Missed it the first time.

[oboe]

I reckon it's right at the top of the page, when you scroll down the picture in the background comes into focus and then if you continue scrolling down you seem to be zooming out from the screen of a MacBook. Missed it the first time.

That's it!

How did you miss it the first time?  Scrolling too fast?   

If you scroll slowly you can see the parallax shift (I think that's what its called) between the peaks in the MacBook's desktop image.   I've seen lots of documentaries do this effect when they pan across old photgraphs, but I'd never seen it activated by scrolling on a webpage.

[Skuzzy]

Maybe a Java thing.  As I no longer have Java installed on any computers, it would explain it.  Or a Flash thing?

The trigger is easy.

[Bizman]

Not Java, I don't have it installed either. Not Flash either, my other browser should ask for it.

I don't understand anything about webpage coding, but for what I see it looks like a step-by-step animation and when you reach the end, you'll be scrolling down again. A neat trick instead of vulnerable add-ons, if I understand it correctly.

[Vraciu]

Was doing some poking around after seeing a couple of videos about guys who create "Hackintosh" computers using their own PC builds and installing Mac OS on them, and found this incredible web effect on Apple's Mac OS Sierra webpage.   

Scroll down on this page, using the mouse wheel or the scroll bar and watch what happens:

https://www.apple.com/macos/sierra/


How do you do that in html?  Is that a plugin effect?

Damn.  That's pretty bad ass.

[Easyscor]

I had to visit it twice to see some of the effect, but not all. I suspect its a slow connection, it behaved like a gif. It appears to be a variation on something like this one on BBC about the Ringling Brothers and Barnum & Bailey Circus. I thought it was pretty neat.

http://www.bbc.co.uk/news/resources/idt-sh/circus_leaves_town

<no java or flash here

[Rich46yo]

Apparently my security is cranked too high as I did not see anything, but a scrolling page.

Yes but its a very impressive "scrolling page" unlike others that just scroll. Seriously tho I only did standard video projects and never got into web content creation but no doubt this is very easy to do. Now a green screen sci-fi segment of 15 seconds with about 500 layers of moving CGI? Thats a little more difficult.

I was into After Effects for awhile and once you get the software concepts and vision down you can pretty much create anything and then move them. I was watching a Japanese movie the other day and the shot of a zero taking off from a carrier was amazing considering it was entirely CGI and probably fairly low budget. They showed the rear of the Zero and the carrier and actually recreated the waves in the air from the heat and the plane pushing air.

[Zener]

It's just a script on the page.  That particular one is box-blur2.  You can see a few examples of these, mostly (but not all) javascript by doing a web search for "box blur script".  Pretty ingenious stuff.

[oboe]

Doesn't work at all on my W10 notebook using Edge browser.  Just a scrolling page.

[Mato]

Looks like a regular webpage to me.  Everything is in clear, sharp focus.  Windows 10 Edge.