

Show HN: My weekend project Parallax.js - Skaught
http://stolksdorf.github.com/Parallaxjs/

======
dangrossman
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.

~~~
bradfriedman
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.

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

------
dmvaldman
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!

~~~
Skaught
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.

------
moe
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...

~~~
Skaught
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.

~~~
tuhin
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.

------
jerfelix
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.

~~~
jasonkester
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.

~~~
eCa
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>

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

------
masukomi
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.

------
arscan
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.

------
morsch
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.

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

The iOS demo is especially awesome.

------
twelve45
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...

------
doomlaser
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.

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

~~~
smspence
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?

~~~
morsch
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.

------
jQueryIsAwesome
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.

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

------
powertower
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.

~~~
smspence
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.

~~~
powertower
> 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.

~~~
cheald
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.

~~~
powertower
> 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...](http://googlesystem.blogspot.com/2010/11/google-chromes-version-
number-is.html)

> 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.

