Parallax Scrolling

rp-7
#21

Got it - cheated a bit and its not super sexy - but I put a Frame in the DP - and called the individual page into the Frame and its working.

Now I wish I could just hide that gross scrollbar on the Frame…or style it somehow so it was sleek at least.

#22

Great!! Glad I could help!! Remember… There’s no cheating when it come to prototyping UX… there is resourcefulness!!!

Have a great conference bro!! :slight_smile:

#23

AMEN to that. Turns out you are one great resource!

I think you are the first and ONLY person on the web that has done parallax scrolling in its true form (and or the only one awesome enough to share and not be stingy). I searched for hours and hours looking for examples.

So thanks. This was my last hurdle to help “wow” the audience. Can’t wait to actually get the feedback and test it once the conference is over.

#24

Thanks for the post. Starting point.

How are you select the scroll value? For example, on the thread’s rp the Dynamic Panel labled “Back” is -[[Window.ScrollY / 8]]. I’m wondering how you selected the value 8. Did you guess, then trial and error. Or are you aware of the scroll speed based on the value?

Moreover, if a higher values decreases the scroll, then at which number does the scroll “stop” or “reverse?” Does it become infinitely slower or can the Y value change DP scroll’s direction? I’d like some DPs to scroll in the reverse direction. The highest I’ve tried was 22,222 and the lowest was -10

#25

Hi, are you able to upload an example and video tutorial of vertical parallax scrolling please? site example: Jacksonville Art Walk | I Love Art Walk | First Wednesday of Every Month in Downtown Jacksonville

#26

This is your best bet…

Basic Parallax Scrolling Tutorial

The site you’re linking to isn’t really quite parallax from what I can see. You can try setting a background image and then just using 100% wide dynamic panels for the full width stuff. Here’s a link for that http://www.axure.com/c/forum/tips-tricks-examples/9725-100-percent-wide-dynamic-panel-100%-dp-fluid-full-browser-width-background-strip-bar-auto-carousel.html

#27

Hi, I am fairly new to Axure and still couldn’t find where the codes are…

#28

Hi Sfethan,

Could you specify what codes you’re looking for? If it’s the Window.scroll function, here’s a screenshot in context of the original poster’s example:

Case Editor Screenshot | Window.scroll

As a start, though, it may help to check out Paul’s example as well: Basic Parallax Scrolling Tutorial

Alex

#29

Hi there,

I have made the parallax work when scrolling down - the box moves left, which is what I want.

But when I scroll back up, the box does not come back to its original position, like the objects do in the example.

I cannot see any difference between what I have done, and what the example shows.

Can someone give me some pointers? Is there a OnWindowScrollUp or something?

Thanks :slight_smile:
ScrollUp.rp (56.9 KB)

#30

Actually in Axure RP v8 there’s OnWindowScrollUp and OnWindowScrollDown try it with that… I did the demo on v6 I think so now you can do it way simpler. :slight_smile:

#31

Oh wow!! I didn’t see there was version 8 out - how exciting. Thanks for that.

Is there a way to fade objects OnWindowsScroll? I have been looking and can’t find anything that allows me to.

#32

You know… I haven’t try all the features yet … but I’m sure you can fade something OnWindowScroll… but I think you can’t fade it partially… like very time you scroll it fades a little… it just fades it all. :frowning:

#33

Ok I was checking that out and as it turns out you can fade exponentially as you scroll… using Set Opacity in the case editor. :slight_smile: That makes me happy :slight_smile:

#34

You rock bro nice job!

#35

Does this still work with Axure RP 8? It doesn’t seem to work for me…

#36

Hi jadedoel,

Yep, this should still work the same in RP 8. If you see otherwise, can you post your .rp file here for me to test? If you’d rather keep the file private, feel free to email that to <support@axure.com>. Thanks!

#37

Hi Jane, thank you for the response. I gave up and deleted the file I was trying to do the effect on and don’t have time to go back and recreate it, but I followed the tutorials and tried many other slight variations to see if RP8 might have required a slightly different workflow but I still couldn’t get it to work after 90 minutes of trying. If you’re able to create a new mini-demo in RP8 that we can reference that’ll be awesome, or find out if others are experiencing issues with Parallax Scrolling in RP8.

Jade

#39

Hey… here’s a quick example of it… hope it helps

See it live

Parallax_car_v0.rp (269.4 KB)

#40

looks good :slight_smile: :slight_smile: :slight_smile:

unlisted #43