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!
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.
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 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 :).
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.
OK First post ever! Great site by the way! My favourite scroll is definatelly this one
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...
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.
Hello ,I have this project where I am needed to provide parallax vertical scrolling effect.I am referring to the johnpolacek scrolldeck.js and using the plugin .From what I understand is that it is setting different speed to various elements of a div and thus providing the parallax effect .
Can anybody please tell me how can i replace the background images with those which are more suitable for handheld devices esp iPAD because each time I try replacing the images my entire screen goes white . I know my image has to be somewhere on the screen but I am unable to view it .Already tried changing the background position of the image with no success .
Parallax Scrolling websites are great but unfortunately most of them are anti-seo. They do not follow onsite optimization techniques for search engines.
We did and SEO Parallax Scrolling website. You can see it here. Posicionamiento Web
I took http://www.marklawrencedesign.com/ as an example
Amazing isn't it?..
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!
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.
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 :).
http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/
http://silverbackapp.com/
check out this one
http://s3learn.com/selva/
OK First post ever! Great site by the way! My favourite scroll is definatelly this one
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...
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
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 paritrupta@gmail.com
@Mark_Lawrence_Design,
Nice but your 'Awwward winning site' takes 12 years to load?
@Mark_Lawrence_Design
I would also like to get tutorial for your site :)
send me to: tjapi10@gmail.com
please send me the tutorial too! Great job!
maeso.design@gmail.com
I'm looking for a Parallax scrolling plugin to integrate into my wordpress site
Hello ,I have this project where I am needed to provide parallax vertical scrolling effect.I am referring to the johnpolacek scrolldeck.js and using the plugin .From what I understand is that it is setting different speed to various elements of a div and thus providing the parallax effect .
Can anybody please tell me how can i replace the background images with those which are more suitable for handheld devices esp iPAD because each time I try replacing the images my entire screen goes white . I know my image has to be somewhere on the screen but I am unable to view it .Already tried changing the background position of the image with no success .
Here is a simple parallax tutorial for beginners!! Check this out!! http://webavenue.com.au/parallax-website-tutorial/
Parallax Scrolling websites are great but unfortunately most of them are anti-seo. They do not follow onsite optimization techniques for search engines.
We did and SEO Parallax Scrolling website. You can see it here. Posicionamiento Web
We used parallax scrolling as a design concept to be applied to each URL rather than putting the whole website on one URL. http://commons.wikimedia.org/wiki/File:SEO_Parallax_Scrolling_Example.jpg http://commons.wikimedia.org/wiki/File:Parallax_Scrolling_web_tutorial.jpg
That load time is killer but your site looks pristine my friend.