Aces High Bulletin Board

General Forums => The O' Club => Topic started by: oboe on May 21, 2017, 09:30:31 AM

Title: How is this very cool webpage effect accomplished?
Post by: oboe on May 21, 2017, 09:30:31 AM
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/ (https://www.apple.com/macos/sierra/)


How do you do that in html?  Is that a plugin effect?
Title: Re: How is this very cool webpage effect accomplished?
Post by: Serenity on May 21, 2017, 09:53:37 AM
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/ (https://www.apple.com/macos/sierra/)


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

Holy hell that's cool!
Title: Re: How is this very cool webpage effect accomplished?
Post by: Skuzzy on May 21, 2017, 11:43:49 AM
Apparently my security is cranked too high as I did not see anything, but a scrolling page.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Slade on May 21, 2017, 11:45:48 AM
Quote
Apparently my security is cranked too high as I did not see anything, but a scrolling page.

Ditto.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Lusche on May 21, 2017, 11:51:27 AM
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  :D
Title: Re: How is this very cool webpage effect accomplished?
Post by: alkali on May 21, 2017, 11:56:38 AM
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.
Title: Re: How is this very cool webpage effect accomplished?
Post by: oboe on May 21, 2017, 12:06:07 PM
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.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Skuzzy on May 21, 2017, 12:33:46 PM
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.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Bizman on May 21, 2017, 12:43:33 PM
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.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Vraciu on May 21, 2017, 02:09:27 PM
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/ (https://www.apple.com/macos/sierra/)


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

Damn.  That's pretty bad ass.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Easyscor on May 21, 2017, 02:59:57 PM
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
Title: Re: How is this very cool webpage effect accomplished?
Post by: Rich46yo on May 21, 2017, 03:54:02 PM
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.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Zener on May 21, 2017, 06:40:37 PM
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.

Title: Re: How is this very cool webpage effect accomplished?
Post by: oboe on May 21, 2017, 08:15:55 PM
Doesn't work at all on my W10 notebook using Edge browser.  Just a scrolling page.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Mato on May 22, 2017, 07:30:09 AM
Looks like a regular webpage to me.  Everything is in clear, sharp focus.  Windows 10 Edge.
Title: Re: How is this very cool webpage effect accomplished?
Post by: oboe on May 22, 2017, 08:09:22 AM
Chromium doesn't show the special effect either.   Interesting, works on Chrome though.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Shuffler on May 23, 2017, 12:36:30 PM
I see nothing interesting happening.
Title: Re: How is this very cool webpage effect accomplished?
Post by: Skuzzy on May 23, 2017, 12:46:13 PM
Very few browsers appear to display the effect.

Seems like a fail to me.