Hacker News new | ask | show | jobs
by Rovanion 4861 days ago
Completely off topic:

That header image: Is it animated when window.onscroll() is fired? I find one reference in the code to e.addEventListener("scroll", v, !1) which I guess then fires the function v which does:

v = function() { var t = parseInt(e.pageYOffset, 10); t = Math.min(u, t), t !== d && (d = t, t > 0 ? f(t * m, 1) : f(t / -6, -1 * t / u + 1), t >= u - 35 ? s(p, E) : i(p, E))

Could someone point me to some unminimized version of this code, I really like it?

4 comments

Hi, I’m the guy who wrote the code. Here’s a gist for you: https://gist.github.com/porada/5047435
That is awesome! I'll definitely absolutely butcher that code once I get some spare time :D
It looks incredibly cool when rubber band scrolling kicks in. Well done!
Off-topic of the off-topic but can you explain to me what's cool about it? I'm not a web developer so all I see is that the image doesn't scroll off but appears to shrink. Genuinely (not a troll), can't think why that's useful though ...
I don't think it's useful in a technical sense, but it did catch my eye so much that I scrolled up and down a few times to watch it. Take that and stick it on a client demo and you might help secure another sale.
There's an out of the box solution (that lacks the performance of ours, unfortunately): http://stephband.info/jparallax/

@porada, author of the one on http://codetunes.com said he'll post something here.

The effect is achieved by having a div with a specified height pushing down the article. As you scroll down the div naturally moves up with the rest of the content. The scroll event adjusts the position of the background image on that div, relative to the amount of scroll, until it stops when it goes off the screen.
Also regarding the header... that background image is just fantastic. Is there a wallpaper version?
We are planning to release one very soon, stay (code)tuned!