Parallax Scrolling!

[mcguiver178]

I took a look at this post that talks about parallax scrolling and well, i found it sooo amazing, that I’m actually redesigning my webpage to work like this! altho I’m having some troubles with the positioning of the images and everything, so anyone that has mastered this…. I would love to hear from you!

I took http://www.marklawrencedesign.com/ as an example

Amazing isn’t it?..

[Ampitere]

Seriously took it about a minute to load. It looks great though, I’d suggest looking into jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/) to allow for a bit smoother scrolling and such.

Possibly Drag Dealer (http://ovidiu.ch/dragdealer-js) as well to make the page grab-able and more interactive (having to use the middle mount/scrollbar is always a pain and takes away from the glory that is parallax).

In a nutshell.. make it load quicker, implement easing to make it less sketchy when scrolling, and make it more interactive by being drag-able and such.

EDIT: Boy I feel silly, I thought that site was yours! Let me help you out a bit with parallax.

While I know very little about it, I know of the components you need to run it. I haven’t got the chance to but it really just takes some time and effort to master, and I don’t really think you can only know a little and get away with it considering the fact that it requires a lot of different components while maintaining things like quality, speed, and efficiency.

The problem with most parallax websites, like Mark’s website, is that they take FOREVER to load. That and they are completely ridiculous when scrolling which makes it look terrible. The two applications I mentioned previously when I thought the site was yours are great for implementing parallax.

Here is a very simple parallax effect tutorial that you can build off of and learn from: http://tympanus.net/codrops/2011/01/03/parallax-slider/

I highly suggest getting together with others who have done or are wanting to do this as it will require a lot of time and if you have multiple heads working at the same time you may catch a quick fix or key aspect that someone else didn’t.

Needless to say, I have the feeling that parallax will just keep growing in popularity and will eventually produce more and more tutorials for those of us who are still behind.

I wish you the best of luck in your endeavors!

[Ampitere]

Here is also a website that uses a side-scrolling parallax with drag dealer and jQuery easing implemented:

http://yessbmx.com

It is by far the best parallax website I have seen, and I wouldn’t doubt it that it’d be easy to swap the side-scrolling to vertical-scrolling.

[mcguiver178]

I got the hang of parallax scrolling with this plugin:

http://jonraasch.com/blog/scrolling-parallax-jquery-plugin Altho I havent been able to do the horizontal movement with the vertical scrolling! am still learning, btu I already got the hang of it, it is amazing on how you can make sites look alive with this.

The trick I used to make the parallax scrolling look better is use lighter images such as gifs and jpgs instead of pngs. the site is still under development but I’ll toss a link once its done to get some comments hehe. am still reading, and pulling tricks out with this parallax.

I found some other “parallax” scrolling other developers have done in a custom way.

and thank you @Ampitere I will be cheking out that jquery easing, if you’re interested we can sit and brainstorm this out lol, I got plenty of time to experiment :).

[Ampitere]

Unfortunately the only time I have open is time developing a contemporary business website for a small business near where I live, but I’d definitely be willing to throw out some ideas if you want feedback.

[mcguiver178]

I’ll upload the project to my personal site and throw you a link so we can discuss with easier time, you’ll see the link here! thanks again :)

[linesandgraphs]

have a look at this site http://www.linesandgraphs.com

[pkinchla]

You might also want to check these out:

http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/
http://silverbackapp.com/

[easyselva]

check out this one

http://s3learn.com/selva/

[theAmateurCoder]

OK First post ever! Great site by the way! My favourite scroll is definatelly [this one](http://graphicnovel-hybrid4.peugeot.com/start.html “”)

But basically my question is these guide seem good but I only have a bit of experience editing wordpress sites. I’m find it really hard to code from scratch.

Where is a good place to start here? Should I get a HTML5 parallax scroll template and customise it and learn as I go or will that limit me…

[Mark_Lawrence_Design]

Hi all,

I see that a lot of people are being referred to my site via this post, so that must mean a lot of people are very interested in parallax scrolling as a web design effect!

I would like to see if you all would like me to write a tutorial on how I created my Awwward winning site over at http://www.marklawrencedesign.com.

Please contact me via my site if so and ill work on it.

Thanks,
Mark

[aryanvijay]

Hi Mark_Lawrence_Design,

I visited your new and old parallax site, via a link on this forum. I would like to congratulate you for your website design.

Will also love to get a tutorial from you, on how you made this parallax site.

Thanks, Aryan
[email protected]

[JohnMotylJr]

@Mark_Lawrence_Design,

Nice but your ‘Awwward winning site’ takes 12 years to load?

[tjapi10]

@Mark_Lawrence_Design

I would also like to get tutorial for your site :)

send me to: [email protected]

[maeso]

please send me the tutorial too! Great job!

[email protected]

[Author]

Posts