6 ms·
Just Scroll
- saxamaphone69 14y agoReminds 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 http://youtu.be/e5FM-VcE7UA
- ch 14y agoTry reverse!
- snprbob86 14y agoYeah, clicking that worked way smoother than me scrolling down myself.
- splatzone 14y agoAnyone care to explain how this works? It can't just be an endless array of divs, can it?
- columbo 14y agoThis might help: http://www2.nissan.co.jp/SP/NOTE/SPECIAL/SHARED/IMG/FRAMES/07_EZD_10.jpg http://www2.nissan.co.jp/SP/NOTE/SPECIAL/SHARED/IMG/FRAMES/0...
- nialo 14y agoviewing the source seems to indicate that it is, in fact, just an endless array of divs. (disclaimer: I don't actually know any html, just how to click 'view source' in Chrome)
- chucknelson 14y ago"I don't actually know any html, just how to click 'view source' in Chrome" That's a bit strange for someone that visits hacker news!
- bfgeek 14y agoSort of. There is an endless array of divs which is absolutely positioned, ie: <div id="container" style="top: -2920px"> <!-- endless array of divs --> </div> The actual scrolling is performed by a 'dummy' div, has the same overflow. Some javascript will be listening to scroll events on this div, and updating the position of the above div. This is typically done as scrolling 'floating' images on most browsers isn't smooth, & to 'jump' the scroll the correct amount to achieve the effect.
- calvinlough 14y agoIt's not just an endless array of divs because then the grid lines would constantly be shifting (that is, unless your browser happens to scroll in increments that are exactly equal to the height of one of the cells).
- recursive 14y agoThey were constantly shifting to me. I was able to get it so that they were barely shifting, but the best I could do made it look like the images were ever so gradually drifting upwards due to a slight mismatch.
- deleted 14y ago[deleted]
- kevincennis 14y agoFor anyone wondering, that's about 135 jpgs at ~100KB on average.
- ars 14y agoIt's 29.3MB according to firebug. Which, in the age of video, isn't really that much.
- potatolicious 14y agoA 29.3MB video runs multiple minutes - so long as your available bandwidth is above a relatively generous minimum, the experience will be smooth and uninterrupted. I'd wager that the average person would burn through this 29.3MB faster than it can be downloaded, considering how fast you'd be scrolling.
- deleted 14y ago[deleted]
- harisenbon 14y agoWhich 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.
- yuliyp 14y agoI hope nobody ever thinks this is a good idea.
- Dramatize 14y agoWhy? I thought it was interesting.
- potatolicious 14y agoAn interesting exercise, but maybe not practical, considering how slow your average home internet connection is, and how much data you're trying to stuff through that pipe. It's IMO likely that most people will end up scrolling faster than the page can load. Not to mention, this will murder any mobile device or weaker laptops. Cool piece of marketing, but ultimately if the goal is to deliver a cool experience to as many people as possible, this implementation may not be ideal.
- colmvp 14y agoThe goal is to deliver a cool experience first, and then reach many people second. If the experience isn't cool, then it's not going to reach many people. I figured people would talk about usability despite the fact that it's a marketing page.
- harisenbon 14y agoNote the .jp. As I mentioned above, our internet speeds are crazy fast. I downloaded the whole thing in about 3 seconds on my home internet, 10 on my 3g ipad. The only issue with the ipad was that you couldn't flick and have it just scroll down.
- m72 14y agoIt's because of the way iOS captures scroll events. These scrolling sites never look right on iOS.
- hcarvalhoalves 14y agoNow multiply by 120 million... and that's why download rates from .jp are so damn low.
- tomkit 14y agoThe irregular intervals at which you scroll your mouse produces a stop-motion type effect :).
- Bjoern 14y agoHaving open quite a few tabs before it killed my Firefox.
- 001sky 14y agoAmazing 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 14y ago>> The modular decomposition. >> Functional redundancy. What?
- lmm 14y agoI'm assuming the grandparent post has been machine-translated from Japanese
- marginalboy 14y agoClassic case of "just because you can doesn't mean you should"...
- nu2ycombinator 14y agoYou do not have to scroll down. Press on Menu buttons 1, 2, 3, 4 one after another
- graue 14y agoI 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...)
- barrkel 14y agoI'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.)
- sojacques 14y agoUsing 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 14y agoSaw memory spikes while scrolling, but didn't notice any performance problem (FF 14 x86_64, 4gb ram, gentoo linux)
- fsok 14y agoI killed Firefox after 5 minutes of heavy io. In Chrome it just runs fine. (Macbook from 2007, 1GB RAM, FF15)
- dbcooper 14y agoWith today's Firefox nightly build I see a peak of 337MB with it. Image discarding has improved recently. https://bugzilla.mozilla.org/show_bug.cgi?id=683290 https://bugzilla.mozilla.org/show_bug.cgi?id=683290
- deleted 14y ago[deleted]
- fungi 14y agosave 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)
- edave01 14y agoOr you can click one of the links at the top to auto-scroll to a section.
- fersho311 14y agonope, the hacker in me likes the javascript better.
- taf2 14y agointeresting for me that's really jumpy, it looks like each frame is 120px high? so something like this is much smoother at the beginning for me: var step = function() { $("#container").css({top: (parseInt($("#container").css("top"))-115)+'px'}); window.webkitRequestAnimationFrame(step); }; step(); but in the middle where it zooms into the people in the car, it get's out of sync...
- LancerSykera 14y agoBest use of my freewheel Logitech "Marathon Mouse" M705 yet.
- Splines 14y agoProbably the only time I clicked the "no detent" button on my Logitech mouse as well.
- shuw 14y agoI 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 14y agoThe 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.
- WagnerVaz 14y agoSorry but the driving wheel is in the opposite side.
- harisenbon 14y agoIt's on the correct side when you're in Japan. Our steering wheels are on the right, and we drive on the left, just like England.
- robotmay 14y agoAnd we, the English, thank you for putting the indicator stalk on the right of the steering wheel. Seriously; that's a major factor in me buying a car.
- suyash 14y agoHow does it perform on touch devices? This is a great use case for just flicking thru on mobile and tablets.
- se85 14y agoInteresting 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)
- eckyptang 14y agoIt works very well in IE9 (both desktop and WP7.5). Perhaps you should try it before you slate it.
- se85 14y agoI understand that IE9 uses the GPU to render the DOM. That would help vastly with things like this, unfortunately it does little for its JavaScript performance, but since this page doesn't seem to execute any JavaScript during scrolling (i think) i guess it's not relevant for this one edge case scenario :-)
- eckyptang 14y agoI think you're confusing IE9 with IE8.
- madmax108 14y agoThis 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!
- DigitalSea 14y agoWow, 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.
- aidos 14y agoWe 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 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).
- icebraining 14y agoThe 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.
- username3 14y agoMiddle-click auto-scroll.
- egze 14y agoThe page could use some infinity.js
- gdubya 14y agowtf! tl;dr ;)
- madmikey 14y agoIn countries like INDIA, the site takes about more than ten minutes to load on an average indian internet connection.
- sundarurfriend 14y agoI 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=30428 http://www.businesswireindia.com/PressRelease.asp?b2mid=3042....
- Achshar 14y ago512 here, ten minutes just about fits the bill. I have been reading all these comments but have no idea what it is because it wont load for me at all. i cant load 30 mb. It's bsnl and it wont even give complete 512. more like 400.
- madmikey 14y agoMost of the indians use the traditional BSNL broadband.. of course my smartphone witha airtel 3g , docomo 3g it loads good.. but when i am on my PC,, with that BSNL, things are not so fine my friend..
- gavingmiller 14y agoOf course the goal of this website is to sell cars to Indians out of Japan, so really fail on Nissan's part
- federicoweber 14y agoThat's exactly the point. It's an advertisement page, targeted to a specific demographic target that have access to a fast network connection. It's not something that should be always reliable and usable.
- w0utert 14y agoNice, but Volkswagen has had the exact same thing for months, but done a lot better: http://beetle.de/ http://beetle.de/
- kyberias 14y agoI don't see how that is "better", it's just totally different. I think this VW version looks a total mess when scrolled. Nissan is much much simpler and smoother.
- menacingly 14y agoThis is one of the more extreme abuses of "exact same" I have witnessed.
- eckyptang 14y agoThis 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 14y agoContrary 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 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 14y agoThat'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.
- eckyptang 14y agoYou can still make houses out of baked poop :) I'm not sure of the relevance of that point though :(
- sageikosa 14y agoPerhaps someone can patent this and save the rest of us from copycats.
- manuscreationis 14y agoInefficient? Sure Cool to look at? You betcha Not everything needs to be a technological marvel
- gavingmiller 14y ago+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.
- CubicleNinjas 14y agoThank you for this. I'm so sad that the comments that top HN comment areas are individuals complaining about implementation. This should be a place to find inspiration and encourage innovation, not nitpick those who are willing to try for great things. /renewed hope
- mp99e99 14y agoReally cool, thanks for sharing.
- manojlds 14y agoOf my latest versions of Opera, Firefox, Chrome and IE, only IE handled this to perfection! (it was IE10)
- Kluny 14y agoPeople 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!
- thetecnica 14y agonice one.