Parallax scrolling

Hey guys,

I was wondering if anybody has ever succeeded in linking two ion-scroll directives to create something like a parallax effect?

1 Like

I think the closest I’ve ever come was adapting the shrinking header demo to make this.

But a more in-depth example of using the zynga scroller for parallax can be found here.
http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js/

But it does require an extra js file.

Here’s some more option for to explore as well.

Thanks @mhartington! Good examples here. Only thing I’m worried about is that the example that integrates with the Zynga scroller uses jQuery, and was kind of looking for a vanilla js / Ionic way to connect two ion-scrolls.

Maybe it’d be a good feature request to have a speed property on ion-scroll? A long with a way to connect two or more ion-scroll directives, that way it would be easy to create a parallax scroll with only Ionic elements. Idea?

I haven’t messed with parallax too much, but it doesn’t seem too complicated to wire together. Check out this video for a nice walkthrough about making one and then use the shrinking header for some inspiration.

If I have time tonight, I’ll try to wire something up

2 Likes

Hey @mhartington Did you manage to make any progress on this?

I’d do this myself but I’m at a loss at how ionic exposes the information on how far one ion-scroll has scrolled, which could then be used as input for another ion-scroll…

Not too much, had my own fish to fry. Hopefully I will finish it up later today (it’s 8:20am in my neck of the woods)

Amazing man, I really appreciate it.

Hey @coen_warmer, I was out of town for a few days but, I got a quick implementation up using stellar.js

I definitely not a finished product, but it should get you started with out having to write your own parallax library. Good luck!

1 Like

Thanks @mhartington! It does use jQuery which makes me slightly weary of performance but I’ll do some tests on different devices to see how it works out. Thanks again!

At @coen_warmer, please keep us posted about your testing!

I was just browsing this old post and found this: probably outdated but it might help some of you.


I am going to play with pure css myself.

@fkbart

I just tried it. Performances are awful with it on mobile ! It’s perfect for the desktop though…

Even on iOS the performance is slow ?

There’s been a nice thread about making a sort of parallax scrolling and we’ve put together this nice example.

6 Likes

Hey @mhartington, thanks for this, it’s awesome. I’ve successfully implemented it, but I’m having trouble trying to apply it across slidebox slides, such that each slide would apply this affect on it’s own.

As it is now, if I simply apply header-shrink to each ion-content, then scrolling on any of them applies the affect to all of them.

Any ideas on how to break this out? I’ve been trying unsuccessfully for hours. Thanks!

I spent a while trying to get this to work as it was for items on different pages, in the end I gave up and broadcast an event using the on-scroll of the content pane rather than adding onscrolls to each instance.

Not sure how to embed that in here though

As it is now, if I simply apply header-shrink to each ion-content, then scrolling on any of them applies the affect to all of them.

To do this you need to get the current scroll position and the position of the element that needs to scroll, you then only apply the affect after the scroll reaches the position of the element

HI there.

I really enjoyed your version of parallax scrolling with ionic, but I got a little problem.
How to implement this on Android side if we enabled native scrolling ? Can we still retrieve a “scrollTop” property somewhere ?

Thanks !

EDIT : Auto answer.

All you need to do is to change “e.detail.scrollTop” to “e.target.scrollTop” to retrieve the correct value of scrolling with Native scrolling.

1 Like

I’m using native scrolling and animation is flickering a lot! Did anybody is experiencing the same thing?