Comments on: Showcasing the CSS Parallax Effect: 12+1 Creative Usages [Update2] http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/ Home of designer, developer & photographer Matthias Kretschmann Thu, 11 Mar 2010 15:40:36 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Tyler http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-49793 Tyler Sat, 20 Feb 2010 23:56:35 +0000 http://www.kremalicious.com/?p=61#comment-49793 I'm working on a series of "Javascript Feelings" which attempt to explain complex human emotions using Javascript. I've used the parallax effect in my first piece entitled "Intimacy With Strangers." http://verytogether.com/lifestyle/play/javascript-feelings-intimacy-with-strangers.html I’m working on a series of “Javascript Feelings” which attempt to explain complex human emotions using Javascript. I’ve used the parallax effect in my first piece entitled “Intimacy With Strangers.”

http://verytogether.com/lifestyle/play/javascript-feelings-intimacy-with-strangers.html

]]> By: Lucas http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-49730 Lucas Mon, 01 Feb 2010 15:07:46 +0000 http://www.kremalicious.com/?p=61#comment-49730 HI!, Very cool roundup. I actually used the parallax technique to build my website, check out the navigation, I'm quite sure you'll like it. HI!, Very cool roundup. I actually used the parallax technique to build my website, check out the navigation, I’m quite sure you’ll like it.

]]> By: Shamima Sultana http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-49608 Shamima Sultana Tue, 19 Jan 2010 09:33:25 +0000 http://www.kremalicious.com/?p=61#comment-49608 Great examples...thanks for sharing Great examples…thanks for sharing

]]> By: Jesse http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-48824 Jesse Mon, 09 Nov 2009 18:44:53 +0000 http://www.kremalicious.com/?p=61#comment-48824 Beatles Rockband website using a Parallax overlay http://www.thebeatlesrockband.com/news/post/8 Beatles Rockband website using a Parallax overlay
http://www.thebeatlesrockband.com/news/post/8

]]> By: John Smith http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-48772 John Smith Fri, 09 Oct 2009 20:44:28 +0000 http://www.kremalicious.com/?p=61#comment-48772 Great showcase! It was very inspiring to me for creating my new portfolio. I use parallax effects with the clouds and the footer :) http://www.thejohnsmith.com Great showcase!
It was very inspiring to me for creating my new portfolio.
I use parallax effects with the clouds and the footer :)
http://www.thejohnsmith.com

]]> By: Bruno Bergher http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-48462 Bruno Bergher Fri, 29 May 2009 15:08:30 +0000 http://www.kremalicious.com/?p=61#comment-48462 Nice compilation. I've also used an effect along these lines in a website I recently designed: http://www.malocaestudio.com (The company is a sound recording and editing studio in Brazil—just so you can understand the rationale behind the sound waves.) Nice compilation.
I’ve also used an effect along these lines in a website I recently designed: http://www.malocaestudio.com

(The company is a sound recording and editing studio in Brazil—just so you can understand the rationale behind the sound waves.)

]]> By: ncilingir http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-46022 ncilingir Sat, 25 Apr 2009 13:57:06 +0000 http://www.kremalicious.com/?p=61#comment-46022 First i saw parallax usage with jquery on <a href="http://dezignus.com/" rel="nofollow">dezignus</a>. i found that jParallax is a plugin for jquery, available at <a href="http://webdev.stephband.info/parallax.html" rel="nofollow">http://webdev.stephband.info/parallax.html</a>. i have used it on my latest design. <a href="http://www.yolcudergisi.com" rel="nofollow">http://www.yolcudergisi.com</a> First i saw parallax usage with jquery on dezignus. i found that jParallax is a plugin for jquery, available at http://webdev.stephband.info/parallax.html.

i have used it on my latest design. http://www.yolcudergisi.com

]]> By: Nicolas http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-45203 Nicolas Mon, 20 Apr 2009 07:28:42 +0000 http://www.kremalicious.com/?p=61#comment-45203 It would be good if it were possible to do some vertical parallax (on v-scroll), since most users won't resize the viewport and thus the effect is lost. It is not possible to position a background image so as to move along with the vertical scroll bar, right? (except the extreme case of "position:absolute", where it will stick to the viewport) I guess it's easy with jQuery and the like, though... It would be good if it were possible to do some vertical parallax (on v-scroll), since most users won’t resize the viewport and thus the effect is lost. It is not possible to position a background image so as to move along with the vertical scroll bar, right? (except the extreme case of “position:absolute”, where it will stick to the viewport)

I guess it’s easy with jQuery and the like, though…

]]> By: Scott http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-9325 Scott Wed, 08 Oct 2008 07:17:55 +0000 http://www.kremalicious.com/?p=61#comment-9325 I designed this ecommerce site back in July: http://www.marineworld247.com The Parallax Effect is a hidden gem when resizing the width, but it's put to good use on the images. The design features both stock photos as well as some good ol' get-your-hands-dirty-with-Photoshop effects. I enjoyed the project quite a bit. Feel free to share, if so desired ;) I designed this ecommerce site back in July: http://www.marineworld247.com

The Parallax Effect is a hidden gem when resizing the width, but it’s put to good use on the images. The design features both stock photos as well as some good ol’ get-your-hands-dirty-with-Photoshop effects. I enjoyed the project quite a bit.

Feel free to share, if so desired ;)

]]> By: anna http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-8914 anna Fri, 03 Oct 2008 20:03:54 +0000 http://www.kremalicious.com/?p=61#comment-8914 I came across this site today: http://stephband.info (on the right some demos) I came across this site today: http://stephband.info (on the right some demos)

]]> By: krema http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-4570 krema Tue, 26 Aug 2008 12:52:41 +0000 http://www.kremalicious.com/?p=61#comment-4570 hi <strong>Michael</strong>, thanks for posting the link to your example. Very much like this Aircraft site. It's a beautiful dark website. Well done! hi Michael, thanks for posting the link to your example. Very much like this Aircraft site. It’s a beautiful dark website. Well done!

]]> By: Michael http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-4437 Michael Mon, 25 Aug 2008 13:20:41 +0000 http://www.kremalicious.com/?p=61#comment-4437 Our firm recently created several Parallax headers for a corporate client: <a href="http://www.aircraftlogix.com" rel="nofollow">Aircraft Logix</a> The client loved it! Our firm recently created several Parallax headers for a corporate client:

Aircraft Logix

The client loved it!

]]> By: css-faq http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-3149 css-faq Fri, 08 Aug 2008 07:04:06 +0000 http://www.kremalicious.com/?p=61#comment-3149 oh! very nice blog site. Keep blogging. oh! very nice blog site. Keep blogging.

]]> By: Richard Quick http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-37 Richard Quick Sat, 07 Jun 2008 02:03:17 +0000 http://www.kremalicious.com/?p=61#comment-37 Hi Matthias, As promised, I'm posting the link the Eden Sessions site we did. <a href="http://sessions.edenproject.com/" rel="nofollow">Eden Sessions</a> This uses Javascript to do a Parallax effect, based on the mouse position. It's a specific javascript function .. as apposed to something that uses a framework, but it does still chew up the memory a bit on older machines. However, it's nowhere near the 90%. In a future version, we'll add a link in the accessibility bar which says "turn off effects" for people with older computers. All in all though, I think it works very well .. and the background with the transparent boxes and small amount of movement works well. Incidentally, the crowd and stage picture isn't something we came up with artificially for the website. It's something Eden have used in all their press advertising as well, in the national press, NME etc .. so I think it's a justified use of Parallax on a commercial site .. not just something that's done for the sake of being cool. (though it is very cool). We're pretty chuffed with the Eden Sessions site and I think it's the first time I've seen something like this on a commercial site .. rather than as an experiment or on a blog. I'd be interested to know other people's thoughts. - Rich Hi Matthias,

As promised, I’m posting the link the Eden Sessions site we did.

Eden Sessions

This uses Javascript to do a Parallax effect, based on the mouse position.

It’s a specific javascript function .. as apposed to something that uses a framework, but it does still chew up the memory a bit on older machines.

However, it’s nowhere near the 90%.

In a future version, we’ll add a link in the accessibility bar which says “turn off effects” for people with older computers.

All in all though, I think it works very well .. and the background with the transparent boxes and small amount of movement works well.

Incidentally, the crowd and stage picture isn’t something we came up with artificially for the website. It’s something Eden have used in all their press advertising as well, in the national press, NME etc .. so I think it’s a justified use of Parallax on a commercial site .. not just something that’s done for the sake of being cool. (though it is very cool).

We’re pretty chuffed with the Eden Sessions site and I think it’s the first time I’ve seen something like this on a commercial site .. rather than as an experiment or on a blog.

I’d be interested to know other people’s thoughts.

- Rich

]]> By: routine http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-38 routine Tue, 03 Jun 2008 21:43:30 +0000 http://www.kremalicious.com/?p=61#comment-38 thank you. i know. it was just an experiment. 90% are too much. but i do not know how to make it do a better performance. any suggestions? thank you.
i know. it was just an experiment.
90% are too much.
but i do not know how to make it do a better performance.
any suggestions?

]]> By: krema http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-36 krema Mon, 02 Jun 2008 17:35:46 +0000 http://www.kremalicious.com/?p=61#comment-36 @<strong>routine</strong>: nice one! but 90% CPU usage on a Core2Duo Machine just for browsing a website... have added you to my article. @<strong>Jorge Epuñan</strong>: Nice one, too! Congratulations for such a great example in terms of usability. have updated my article with your parallax and a link to it, too. @<strong>Dylan Bathurst</strong>: Thank you ;-) @routine: nice one! but 90% CPU usage on a Core2Duo Machine just for browsing a website… have added you to my article.

@Jorge Epuñan: Nice one, too! Congratulations for such a great example in terms of usability. have updated my article with your parallax and a link to it, too.

@Dylan Bathurst: Thank you ;-)

]]> By: Jorge Epuñan http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-35 Jorge Epuñan Mon, 02 Jun 2008 15:55:42 +0000 http://www.kremalicious.com/?p=61#comment-35 I've applyed Parallax with Mootools to get some 'real' use (more than just moving the window)... You can check it <a href="http://www.csslab.cl/ejemplos/parallax_mootools/" title="Link to example in CSSLab.cl" rel="nofollow">working here</a>. And <a href="http://www.csslab.cl/2008/05/29/parallax-en-uso-real/" title="Link to the article in CSSLab" rel="nofollow">the explanation</a> (in spanish). cheers. I’ve applyed Parallax with Mootools to get some ‘real’ use (more than just moving the window)…

You can check it working here.

And the explanation (in spanish).

cheers.

]]> By: Dylan Bathurst http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-34 Dylan Bathurst Thu, 29 May 2008 18:05:29 +0000 http://www.kremalicious.com/?p=61#comment-34 Hey kremalicious, thanks for the link love, and great examples. I'm looking forward to reading more of your articles. Hey kremalicious, thanks for the link love, and great examples. I’m looking forward to reading more of your articles.

]]> By: routine http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-33 routine Mon, 26 May 2008 17:13:10 +0000 http://www.kremalicious.com/?p=61#comment-33 hi everybody, i've done something similar on this website: www.sonus-game.com it caused performance problems on some computers, so i've added a enable/disable panel on startup which saves a cookie. hi everybody,
i’ve done something similar on this website:

http://www.sonus-game.com

it caused performance problems on some computers, so i’ve added a enable/disable panel on startup which saves a cookie.

]]> By: kremalicious http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-32 kremalicious Sat, 24 May 2008 08:26:41 +0000 http://www.kremalicious.com/?p=61#comment-32 thanks for the link egot! have included the site in the showcase. thanks for the link egot! have included the site in the showcase.

]]> By: egot http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-31 egot Sat, 24 May 2008 08:08:51 +0000 http://www.kremalicious.com/?p=61#comment-31 Also, see the banner at: http://www.cdev.ru/?proceed Outstanding creation ! Also, see the banner at: http://www.cdev.ru/?proceed
Outstanding creation !

]]> By: krema http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-30 krema Fri, 23 May 2008 12:55:53 +0000 http://www.kremalicious.com/?p=61#comment-30 @Marco: thanks for stumbling and featuring @anna: thanks for the info! International readership rocks! @Marco: thanks for stumbling and featuring
@anna: thanks for the info! International readership rocks!

]]> By: anna http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-29 anna Fri, 23 May 2008 12:41:55 +0000 http://www.kremalicious.com/?p=61#comment-29 The Dutch site with the shaking tree, is about a new campaign of the Dutch non-commercial foundation called SIRE. SIRE campaigns on urgent issues in society that do not get enough attention. The work done for SIRE by advertising agencies, web agencies and other companies is donated and voluntary. The same goes for air time, ad space and other facilities. For instance, they brought violence on children to the attention, and the site with the shaking tree is about fostercare. The Dutch site with the shaking tree, is about a new campaign of the Dutch non-commercial foundation called SIRE.
SIRE campaigns on urgent issues in society that do not get enough attention. The work done for SIRE by advertising agencies, web agencies and other companies is donated and voluntary. The same goes for air time, ad space and other facilities.
For instance, they brought violence on children to the attention, and the site with the shaking tree is about fostercare.

]]> By: Marco http://www.kremalicious.com/2008/05/showcasing-the-css-parallax-effect-12-creative-usages/#comment-28 Marco Fri, 23 May 2008 10:57:44 +0000 http://www.kremalicious.com/?p=61#comment-28 Nice roundup! Got you stumbled + featured on my website. Keep on writing these great articles. Greetings,,, Nice roundup!

Got you stumbled + featured on my website. Keep on writing these great articles.

Greetings,,,

]]>