top | item 4457526

Just Scroll

277 points| koichi | 13 years ago |www2.nissan.co.jp | reply

102 comments

order
[+] se85|13 years ago|reply
Interesting design concept - but a horrible implementation of it.

You can't just go and load a thousand divs and not expect a wide variety of performance issues across all the different platforms.

You need to have a tile manager or something behind the scenes the same way that Google maps does, especially when targetting smaller consumer devices with limited hardware specs like tablets and phones.

* iOS5 - with an iphone 3gs (laggy to the point of being unusable)

* iOS5 - with an iphone 4 (laggy to be the point of being unusable, unless your patient). I don't have an iphone 4gs to test on, but I suspect it might be more on par with ipad 2 performance. The differences could be to do with retina display vs non retina display as well I suppose.

* iOS5 - with an iPad 1 - roughly same performance as an iphone 3gs - crappy

* iOS5 - with an iPad 2 - not too bad (but thats because of the gpu tile rendering in safari going on behind the scenes i suspect.

* Firefox 15 on a quad core i7 imac - massive ram spike, and crazy lag with the scrolling

* Chrome on a quad core i7 imac - no problem.

I'm not even going to bother trying this out in IE!

edit: Latest version of Opera has provided the poorest results yet, it keeps lagging and pausing and reloading the images after they have already been loaded (didn't check to see if it was actually downloading them again though)

[+] graue|13 years ago|reply
I might just ditch Firefox because of this webpage. A fresh session of Ffx15 goes up to 1.5 GB memory usage, pushes everything into swap and brings my whole OS to a grinding halt until I kill it. In other words this link is basically a very effective DoS. In Chromium it works fine. Am I the only one having this problem?

(Edit: I have several Ffx addons running and no Chromium addons, so the comparison was unfair. Maybe I'll just ditch some of those addons...)

[+] mike-cardwell|13 years ago|reply
I use Firefox 15 on Ubuntu, with quite a lot of addons. I watched "top" whilst I opened the page, and I saw Firefox quickly consume 30% of my RAM (I have 8GB). Once the page finished loading, it dropped back down to 5%.

The page works fine for me, but I imagine it would suck if I had less RAM. I tried it in Chrome too and it never even got as high as 5% memory usage.

I'm willing to bet that the developers who made this page, and the managers who approved it, all have plenty of RAM in their machines.

[+] smspence|13 years ago|reply
I am using Firefox 15 on Windows XP. I had no problems whatsoever.

I opened up windows task manager, and watched the mem usage for firefox.exe. Before navigating to that webpage, it was using 150 MB of memory. I went to the webpage and scrolled down as expected, and saw the mem usage peak at around 430 MB when the page first loaded, then as I scrolled down and sat at the bottom of the page, it stabilized at around 300 MB.

After closing the tab and going back to leave this comment, firefox is back to about 150 MB of mem usage. I think there is a problem with your particular installation (or add-ons or drivers), not a general problem with Firefox itself.

[+] shrikant|13 years ago|reply
FF 16 (Aurora channel), Windows 7 here: no noticeable issues. Memory usage showed about 350 MB, and that's not remarkably far from regular usage numbers anyway.
[+] archangel_one|13 years ago|reply
Firefox 15 on Linux, I see 1.7-1.8G of memory use and the page is (unsurprisingly) significantly slower to load than in Chrome. It doesn't bring my OS to a halt because this machine has plenty of RAM, but clearly it's not good.

While that's not a great result for Firefox, I do think the people at Nissan who did that could have shown a little more restraint.

[+] sundarurfriend|13 years ago|reply
My Fx (15, on Vista) was using 700 MB with 20 tabs open, went up to 1GB with this page open, but there's no noticeable performance hit; the page scrolled smooth and snappy. It's probably your addons as you mention, most of us would benefit from periodic checking and removal of addons we no longer need.
[+] barrkel|13 years ago|reply
I'm running FF 15 too, but I'm not seeing what you're seeing. 700MB working set with this page open, which drops to 650 (temporarily) if I close the page and do about:memory GC and CC.

(Mind you I have 24GB of memory on this machine. I wouldn't willingly choose to run Windows 7 on any less than 4GB.)

[+] robotmay|13 years ago|reply
Which channel are you on? I'm running the latest beta and it works fine for me. If you're on stable then I can see how it would be causing you some issues, especially if you have FireBug installed.
[+] sojacques|13 years ago|reply
Using the current Nightly, I go up to 1.1Gb of memory usage, and the system (an old mbp with 8gb ram) is now noticeably slowing.
[+] darkstalker|13 years ago|reply
Saw memory spikes while scrolling, but didn't notice any performance problem (FF 14 x86_64, 4gb ram, gentoo linux)
[+] fsok|13 years ago|reply
I killed Firefox after 5 minutes of heavy io. In Chrome it just runs fine. (Macbook from 2007, 1GB RAM, FF15)
[+] valisystem|13 years ago|reply
I had this problem too. Looks like this thing relies on browser implementation details to run properly.
[+] Tichy|13 years ago|reply
I have no problems with it, FF15 on OS X Mountain Lion.
[+] 001sky|13 years ago|reply
Amazing visuals. I have no idea if the idea scales. Technically might be a bit PITA. The sensation of time. Passing. Wait, what? The modular decomposition. Birdseye flight sequnece. Functional redundancy. An innovation communication language? Dunno. Pity about the ad-part =D

Edit: pls, though. not in the wrong hands.

[+] bruceboughton|13 years ago|reply
>> The modular decomposition.

>> Functional redundancy.

What?

[+] Kluny|13 years ago|reply
People complaining about the scaffolding - oh well. It was probably built by someone who had a bright idea but knows nothing about webdesign and learned it on the fly. But the idea was great! I was delighted - I scrolled through the whole thing, shared it on facebook, then looked up the wiki for the car since the ad was Japanese. I had no performance issues, as I am using chrome on a fast ethernet connection. For someone who doesn't know web design, they did a great job!
[+] DigitalSea|13 years ago|reply
Wow, this is atrocious on so many levels. 30mb of jpg files? The inner web development nerd in me believes there is a better more efficient way to do this. The length of the page is ridiculously long to scroll and unless you have a Mac with a Magic Mouse and smooth scrolling and not a Windows machine (like I use) the scrolling is super jerky.
[+] icebraining|13 years ago|reply
The inner web development nerd in me believes there is a better more efficient way to do this.

Sure there is, it's called a video.

[+] aidos|13 years ago|reply
We fell into the scroll trap with our website last year. I spent a long time figuring out how to get scrolling working smoothly in all the browsers (hint, don't rely on anyones libraries but your own).

Most of it is not that interesting but if you scroll down to Snapper and Twilert (about half way down) you can see how we did the animations ourselves instead of using lots of big jpgs. (actually, cudos to jquery.rotate for making it possible)

http://www.codegent.com/apps

It works in IE7+ (though the js engine in IE7+8 is slooooow).

With a lot of work you can get something that looks pretty but at the expense of a lot of other things (like usability).

[+] shuw|13 years ago|reply
I don't think there is anything special about this "video" ad that lends itself to scrolling. You can take any video (infographic, music video, advertisement) and conceptually scroll through it using a mouse, but what does that gain you?

If you could interact with the elements and there was more than 1 dimension of scroll.. then that'd be going beyond.

[+] Kluny|13 years ago|reply
The thing is, I, and lots of other people, NEVER click on videos, and always click on pictures. It's a weird thing, but it's true.
[+] kevincennis|13 years ago|reply
For anyone wondering, that's about 135 jpgs at ~100KB on average.
[+] ars|13 years ago|reply
It's 29.3MB according to firebug.

Which, in the age of video, isn't really that much.

[+] harisenbon|13 years ago|reply
Which isn't much seeing that Japanese broadband is CRAZY fast. My 100mb line costs me about $60/month. and I could upgrade to Gigabit for around 80/month.
[+] marginalboy|13 years ago|reply
Classic case of "just because you can doesn't mean you should"...
[+] fungi|13 years ago|reply
save yourself the scrolly effort:

run:

  setInterval(function(){$(window).scrollTop($(window).scrollTop()+10)},10);
in your console (f12 in chrome/firebug, crtl+shift+k in firefox)
[+] hcarvalhoalves|13 years ago|reply
Now multiply by 120 million... and that's why download rates from .jp are so damn low.
[+] acgourley|13 years ago|reply
would anything that popular be cached between me and japan?
[+] manuscreationis|13 years ago|reply
Inefficient? Sure

Cool to look at? You betcha

Not everything needs to be a technological marvel

[+] gavingmiller|13 years ago|reply
+1 it's playing like this that inspires ideas in others - should it be so prominent, maybe not. Furthermore, it's going to get linked a ton which is great for Nissan's brand.
[+] saxamaphone69|13 years ago|reply
Reminds me of that advertisement someone did on Pinterest, where you had to scroll down quickly as well.

edit: Uniqlo, that was it. not on their Pinterest anymore. Video for same effect - http://youtu.be/e5FM-VcE7UA

[+] splatzone|13 years ago|reply
Anyone care to explain how this works? It can't just be an endless array of divs, can it?
[+] nu2ycombinator|13 years ago|reply
You do not have to scroll down. Press on Menu buttons 1, 2, 3, 4 one after another
[+] eckyptang|13 years ago|reply
This works pretty well in IE9 with no noticeable performance problems on a 5 year old machine.

Rather scarily, it also works fine on a Lumia 710 as well!

I don't care what anyone says - IE is not a stinking heap of poop.

[+] Kiro|13 years ago|reply
Contrary to what many people believe IE9 actually outperforms both FF and Chrome in many aspects. IE10 should be even better.

http://www.phoboslab.org/log/2011/08/are-we-fast-yet

"Of all browsers and systems I tested, IE9 subjectively produced the best results. It seems to precisely synchronize JavaScript execution with the refresh rate: the benchmark runs at exactly 60 FPS on my machine, even though the timer is scheduled every 16 milliseconds, or 62.5 FPS."

[+] m72|13 years ago|reply
That's because it's been baking out in the sun to the point where the poop is just dried and doesn't really stink anymore.
[+] LancerSykera|13 years ago|reply
Best use of my freewheel Logitech "Marathon Mouse" M705 yet.
[+] Splines|13 years ago|reply
Probably the only time I clicked the "no detent" button on my Logitech mouse as well.
[+] yuliyp|13 years ago|reply
I hope nobody ever thinks this is a good idea.
[+] Dramatize|13 years ago|reply
Why? I thought it was interesting.
[+] madmax108|13 years ago|reply
This is an interesting design concept indeed...

If I remember right, some apparel company used Pinterest's "revolutionary" display (Masonry right?) to a similar effect. Perhaps a HN Search is in order! :)

Memory issues apart,This is pretty cool!

[+] madmikey|13 years ago|reply
In countries like INDIA, the site takes about more than ten minutes to load on an average indian internet connection.
[+] sundarurfriend|13 years ago|reply
I guess if you include dialup connections in the average? The page load seemed pretty much instantaneous to me on a standard 2Mbps Tata Indicom connection. At worst, I believe the average broadband connection these days would be 512 Kbps, and "more than ten minutes" is still too much of a stretch.

Edit: Akamai reports that the average Internet speed in India is 0.9 Mbps: http://www.businesswireindia.com/PressRelease.asp?b2mid=3042....

[+] gavingmiller|13 years ago|reply
Of course the goal of this website is to sell cars to Indians out of Japan, so really fail on Nissan's part
[+] suyash|13 years ago|reply
How does it perform on touch devices? This is a great use case for just flicking thru on mobile and tablets.