5 ms·

Show HN: My weekend project Parallax.js

108 points by Skaught 15y ago

dangrossman 15y ago
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 15y ago
  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 15y ago
    Ah, was wondering the same. I was using FireFox and there was nothing Parallax about it. Tried it in Chrome and then it works. :)
- RandallBrown 15y ago
  I didn't notice it either until I really looked for it. Must be my monitor
dmvaldman 15y ago
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 15y ago
  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.
- fuzionmonkey 15y ago
  Even on desktops, CSS3 transitions are much smoother than Javascript.
g8oz 15y ago
Does it work on the iPad though? Many of these parallax implementations don't.
masukomi 15y ago
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.
jerfelix 15y ago
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 15y ago
  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 15y ago
    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 http://creativecommons.org/about/cc0
  - chc 15y ago
    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.
  - 15y ago
powertower 15y ago
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.
- rnicholson 15y ago
  Kind of harsh to call it "a failure" because it doesn't load in IE8. It loads fine in IE9 btw.
- smspence 15y ago
  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 15y ago
    > 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.
    - eCa 15y ago
      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.
    - cheald 15y ago
      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.
moe 15y ago
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 15y ago
  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.
  - farnsworth 15y ago
    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.
  - tuhin 15y ago
    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.
callmevlad 15y ago
Is this limited to Webkit? Doesn't seem to work on Firefox 10.
- smspence 15y ago
  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 15y ago
    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 15y ago
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 15y ago
  Thanks for the tip, I was just about to start debugging it for IE.
twelve45 15y ago
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...
arscan 15y ago
Nice! I happened across a site yesterday that really could have used this (http://www.nofrks.com/ 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.
aaronmoodie 15y ago
A fellow Melbournite has done something similar with stellar.js http://markdalgleish.com/projects/stellar.js http://markdalgleish.com/projects/stellar.js The iOS demo is especially awesome.
morsch 15y ago
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.
doomlaser 15y ago
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.
doomlaser 15y ago
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.

108 points by Skaught 15y ago

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 15y ago
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 15y ago
  Ah, was wondering the same. I was using FireFox and there was nothing Parallax about it. Tried it in Chrome and then it works. :)
RandallBrown 15y ago
I didn't notice it either until I really looked for it. Must be my monitor

dmvaldman 15y ago

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 15y ago
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.
fuzionmonkey 15y ago
Even on desktops, CSS3 transitions are much smoother than Javascript.

g8oz 15y ago

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

masukomi 15y ago

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.

jerfelix 15y ago

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 15y ago
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 15y ago
  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 http://creativecommons.org/about/cc0
- chc 15y ago
  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.
- 15y ago

powertower 15y ago

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.

rnicholson 15y ago
Kind of harsh to call it "a failure" because it doesn't load in IE8. It loads fine in IE9 btw.
smspence 15y ago
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 15y ago
  > 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.
  - eCa 15y ago
    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.
  - cheald 15y ago
    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.

moe 15y ago

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 15y ago
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.
- farnsworth 15y ago
  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.
- tuhin 15y ago
  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.

callmevlad 15y ago

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

smspence 15y ago
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 15y ago
  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 15y ago

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 15y ago
Thanks for the tip, I was just about to start debugging it for IE.

twelve45 15y ago

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

arscan 15y ago

Nice! I happened across a site yesterday that really could have used this (http://www.nofrks.com/ 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.

aaronmoodie 15y ago

A fellow Melbournite has done something similar with stellar.js http://markdalgleish.com/projects/stellar.js http://markdalgleish.com/projects/stellar.js The iOS demo is especially awesome.

morsch 15y ago

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.

doomlaser 15y ago

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.

doomlaser 15y ago

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.