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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
36 comments
[ 847 ms ] story [ 1335 ms ] threadalso 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!
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.
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.
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.
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.
* 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
I wouldn't and didn't say that. Just that I'd expect it to work with the most common browser out there.
That said, it couldn't be used on a general purpose web site without at least some fallbacks.
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.
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.
I didn't even notice there was a pattern in the background until I read it in a comment here...
An also there is an extra comma in the line 96 and that is one of the reasons it doesn't work on IE8.
Also, hooking into browser history (back button) would be a nice feature.
The iOS demo is especially awesome.