?
Solved

Jquery parralax effect

Posted on 2012-08-22
8
Medium Priority
?
409 Views
Last Modified: 2012-09-16
Hi,

I want to create an effect with html/jquery similar to the attached pdf.

Is this possible and how should i go about it?

Thanks
infin.pdf
0
Comment
Question by:coolispaul
  • 5
  • 3
8 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38320679
I would start with Jquery ScrollTo
0
 

Author Comment

by:coolispaul
ID: 38320702
thanks, but how would you get the same effect by actually scrolling?

it looks like that only works when you trigger the function by clicking a link or something...
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38320801
You can use the jquery .scroll function.

But honestly, why not just create a large background image and code it in a linear fashion. When someone scrolls(like the PDF) you'll have the effect.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:coolispaul
ID: 38320940
I dont understand how that would work as there is movement diagonally
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38321019
It only "looks" like there is movement diagonally when you scroll.  A PDF is just like any other document in that it's vertical.

If you have an image that you'd like to use I can see if I can code a quick example for you.
0
 

Author Comment

by:coolispaul
ID: 38321129
I have a storyboard as a psd if that helps.
Also is a jpeg of a few of the screens as 1 big image - im not sure if this is right but may be what you need...

thanks for taking a look...


Thanks
infin.psd
all.png
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38322302
After some playing around, it's probably going to be best to slice up the images you need and then we'll invoke the jquery scrollTo plugin.  I tried it as one large background, but it just looks clunky and odd.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 1500 total points
ID: 38323236
I just came across this and it looks like it may help:
http://web-features.net/parallax-background-builder.html
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question