3 ms·

For the web inclined guys here. What techniques are used to show motion/animation? looks quite smooth/impressive

dimxasnewfrozen 12y ago
It's a series of images and videos is looks like. The video plays and then overlays an image (in the exact location that the video ended) on each scroll/navigation.
Cthulhu_ 12y ago
HTML5 video, I'm sure. They used that on the Mac Pro website too - they had two videos for each 'image', one forward, and one in reverse. Some JS playback controls linked to scrolling, and that's pretty much it. Very nice results though.
UnoriginalGuy 12y ago
As a web developer and web user I completely refuse to tell you, otherwise I worry you might copy this horrendous site design elsewhere. This is a site anti-pattern (at least at desktop resolution). The site is only readable when I shrink the browser down until that terrible animated nonsense goes away.
andyhmltn 12y ago
It seems heavily inspired by the recent Apple Mac Pro page redesign which is dissected here: https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/ https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/ Personally, I hate this kind of design as it breaks the scroll but it's interesting to see how it works none-the-less
deanclatworthy 12y ago
It cycles through images based on scroll position. My colleague built a site that uses technique and made a library to make managing it easier. The site: http://download.kone.com/ultrarope/index.htm http://download.kone.com/ultrarope/index.htm The code: https://github.com/kontur/jquery.video-frame-animation https://github.com/kontur/jquery.video-frame-animation
uptown 12y ago
It's an HTML5 video. If you inspect the page, you'll see the following: <video id="dyson-360-video"> <source src="/video/dyson.mp4" type="video/mp4"> <source src="/video/dyson.ogv" type="video/ogg"> <source src="/video/dyson.webm" type="video/webm"> </video> So your browser determines which video to play based on your browser's capabilities. And the pagination can be handled with a technique as follows: http://www.thepetedesign.com/demos/onepage_scroll_demo.html http://www.thepetedesign.com/demos/onepage_scroll_demo.html

It's a series of images and videos is looks like. The video plays and then overlays an image (in the exact location that the video ended) on each scroll/navigation.

Cthulhu_ 12y ago

HTML5 video, I'm sure. They used that on the Mac Pro website too - they had two videos for each 'image', one forward, and one in reverse. Some JS playback controls linked to scrolling, and that's pretty much it. Very nice results though.

UnoriginalGuy 12y ago

As a web developer and web user I completely refuse to tell you, otherwise I worry you might copy this horrendous site design elsewhere. This is a site anti-pattern (at least at desktop resolution). The site is only readable when I shrink the browser down until that terrible animated nonsense goes away.

andyhmltn 12y ago

It seems heavily inspired by the recent Apple Mac Pro page redesign which is dissected here: https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/ https://ihatetomatoes.net/apple-mac-pro-page-deconstructed/ Personally, I hate this kind of design as it breaks the scroll but it's interesting to see how it works none-the-less

deanclatworthy 12y ago

It cycles through images based on scroll position. My colleague built a site that uses technique and made a library to make managing it easier. The site: http://download.kone.com/ultrarope/index.htm http://download.kone.com/ultrarope/index.htm The code: https://github.com/kontur/jquery.video-frame-animation https://github.com/kontur/jquery.video-frame-animation

uptown 12y ago

It's an HTML5 video. If you inspect the page, you'll see the following: <video id="dyson-360-video"> <source src="/video/dyson.mp4" type="video/mp4"> <source src="/video/dyson.ogv" type="video/ogg"> <source src="/video/dyson.webm" type="video/webm"> </video> So your browser determines which video to play based on your browser's capabilities. And the pagination can be handled with a technique as follows: http://www.thepetedesign.com/demos/onepage_scroll_demo.html http://www.thepetedesign.com/demos/onepage_scroll_demo.html