Show HN: My weekend project Parallax.js | Hacker News Reader

Show HN: My weekend project Parallax.js

stolksdorf.github.com

108 pointsSkaught35 comments

I would expect a demo for Parallax.js to demonstrate the parallax effect. If it's there, it's impossible to see with the dark repeating background.

I can see it pretty clearly on my monitor. It gives a perspective that the background is "farther away" from the viewer than the text.

Ah, was wondering the same. I was using FireFox and there was nothing Parallax about it. Tried it in Chrome and then it works. :)

I didn't notice it either until I really looked for it. Must be my monitor

very nice! you may want to consider doing these transitions with CSS3 and falling back to javascript top/left animations because they are optimized for mobile. The transitions lag a bit on my iphone.

also it would be nice to have a fixed header, like a menu navigation. you could have the animated content be local to a div with an overflow: hidden attribute, as opposed to moving the entire page.

great work!

Your suggestion for the CSS3 is great, I'll definitely toy around with it in the next few days.

Secondly, Parallax.js can already do this. It simply moves around the divs you feed it, which can be tiny or full screened! This allows you to throw your own header on the top, or, if you like, a same parallaxing div in the center of your page.

Even on desktops, CSS3 transitions are much smoother than Javascript.

Please use a higher contrast pattern for the demo!

I didn't even notice there was a pattern in the background until I read it in a comment here...

I tried a few really obvious backgrounds (Even a mario background for fun) and found a soft subtle background gave the best effect, although it looks like I went too far. It looked fine on the few screens I demo'd it on, but I'll update with a higher contrast background soon.

I noticed it much more when I turned my laptop screen brightness up all the way. Maybe something to consider testing if you pick a new one.

Try using something more colorful like a landscape or bokeh so that the perception of parallax feels natural and impactful. I had totally missed the parallax had it not been for the comments here.

Very cool.

I'm not seeing a license file, or any mention of licensing. You might want to toss that in there, if you want to allow / encourage people to use it.

I've never understood this complaint. If the author didn't want people to use his thing, he wouldn't have put it out on the internet and encouraged people to use it. Why do you feel the need to add rules and restrictions to something so trivial as sharing a few lines of code with anybody who wants to use them?

Open source licenses only ever really serve to restrict what you can do with the thing. If you truly don't care what people do with the code you release, just release it. Like this guy did.

Actually, they don't. Any work you do is automatically restricted in its use. What open source licenses strive to do (to varying degrees, depending on license) is basically:

* Reduce the risk for the person publishing the thing

* Grant rights to the user of the thing

* Restrict (or not) the ways in which the thing can be distributed to others

About the closest to public domain you can get is probably something like this: http://creativecommons.org/about/cc0

Legally speaking, that's backwards AFAIK. If you don't give people a license, they are not allowed to do anything with your code — full copyright protection is something you have to opt out of, not into. You might say that putting it on the Internet and encouraging people to use it is an implicit license, but you're on thin ice at best if you're depending on that unwritten license. I doubt most legal departments would even consider the suggestion. Even if you really, really trust the author, someone could acquire the rights to the code later on and sue your pants off if you don't actually have a valid license. Would you be able to successfully argue "But this other guy posted it on the Internet, so obviously I'm allowed to use it as I see fit"? IANAL, but I really doubt it.

Many corporate environments are not allowed, period, to use software against the terms of of the license. In absence of a license, the author retains all rights.

Does it work on the iPad though? Many of these parallax implementations don't.

First off, very nice. I'm working on an app this would be perfect for, assuming the performance is good on mobile devices.

With that said, I have to agree with @dangrossman I don't see any Parallax effect. I just see nice sliding pages.

[edit] went back and looked more closely at the background. I can see the effect, the image choice for background is just poor at showing it off. Maybe it's more visible when you don't have a bright window behind you like I do, but those thin gray lines really ought to be replaced with something more visible.

Nice! I happened across a site yesterday that really could have used this (http://www.nofrks.com/). Parallax looks great for scrolling landscapes -- a demo of something like that would be pretty cool.

Also, hooking into browser history (back button) would be a nice feature.

I like the effect, don't like that it doesn't work in Firefox, I do like the subtle pattern (people, calibrate your displays), I don't like that it "breaks" the back button: for some reason I feel as if pressing back should go back one slide, it's more like navigating a link than scrolling.

A fellow Melbournite has done something similar with stellar.js http://markdalgleish.com/projects/stellar.js

The iOS demo is especially awesome.

Great work. Love the humor too :) I second the other comments about choosing a different background - took me a while to notice the parallax effect...

It'd be cool if you could tag divs with a value of parallax so you could do transitions between scenes with multiple 'layers' of parallax.

Is this limited to Webkit? Doesn't seem to work on Firefox 10.

I'm using Firefox 10 and it works great for me. Do you have weird custom javascript settings, or are you using any extensions like No-script that might be interfering with it?

Are you sure? It doesn't display properly for me in either Firefox 10 (pretty clean Development profile) or 13 (not so much). The page basically works, but there is no parallax scrolling. It looks much more impressive in Chrome.

It should allow continues clicking/sliding; right now you have to wait until the next slide is positioned.

An also there is an extra comma in the line 96 and that is one of the reasons it doesn't work on IE8.

Thanks for the tip, I was just about to start debugging it for IE.

If your website does not load correctly with IE8, which has the largest market share in the IE group and is also about 20%-30% of all internet browsers, this is a failure, especially if there is no technical reason for this to be.

Kind of harsh to call it "a failure" because it doesn't load in IE8. It loads fine in IE9 btw.

It's called a "weekend project", not "this is a rock-solid, time-tested piece of software that works in absolutely every browser perfectly". If you would like to help out, go ahead and download the source and make the necessary modifications to make it compatible with IE8.

> not "this is a rock-solid, time-tested piece of software that works in absolutely every browser perfectly".

I wouldn't and didn't say that. Just that I'd expect it to work with the most common browser out there.

It may be the most used single browser version, but I'd put in the 25±10% range of visitors so it is not used by a majority of users.

That said, it couldn't be used on a general purpose web site without at least some fallbacks.

Or you could look at it the other way around and say that this demo works for ~85% of the web already.

For the record, Chrome 16 holds the title of "Browser with the single largest piece of marketshare for vendor/version combo" with 30.5% as of Jan 2012. It works dandy in there. So yeah, it works just fine with the most common browser out there.

IE8 was released nearly three years ago. By way of reference, in that time, Chrome has shipped 18 major versions. Complaining that modern snazz demos don't work in IE8 is just ridiculous at this point.

> For the record, Chrome 16 holds the title...

I was under the impression that Chrome auto-updates, and hence Chrome 16 is really all the "Current stable release" versions of Chrome.

So might as well compare it to IE9 and IE8 combined.

http://www.w3counter.com/globalstats.php

> By way of reference, in that time, Chrome has shipped 18 major versions.

I was also under the impression that Chrome got rid of meaningful "major" releases some time ago in favor of non-meaningful "major" releases.

"Google Chrome's Version Number Is Meaningless"

http://googlesystem.blogspot.com/2010/11/google-chromes-vers...

> Complaining that modern snazz demos don't work in IE8 is just ridiculous at this point.

Getting some text to align on a website for a significant browser segment is not ridiculous to me at all.

Reply on news.ycombinator.com