Parallax Scrolling In Canvas

General
1

Hi,

I’m trying to implement a parallax scrolling preview in a canvas with a scrollbar attached to it.

Calculations based on this implementation;

http://pixelcog.github.io/parallax.js/

Where you can specify any number of images and they would scroll based on the speed specified and the height/width of the images.

If there is anyone that could help with an implementation I would really appreciate it. I am willing to pay for a real example.

Thanks,
Paul

2

[quote=202351:@Paul Levine]Hi,

I’m trying to implement a parallax scrolling preview in a canvas with a scrollbar attached to it.

Calculations based on this implementation;

http://pixelcog.github.io/parallax.js/

Where you can specify any number of images and they would scroll based on the speed specified and the height/width of the images.

If there is anyone that could help with an implementation I would really appreciate it. I am willing to pay for a real example.
[/quote]

Why not try to implement it inside an HTMLViewer as to benefit from the API placed on Google servers ?

3

Thank you but for what I need, I need to mimic the behaviour in a canvas.

4

I think what they show at the page you link to is poor demonstration of what parallax scrolling is. I like much better this :

https://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

I think such an effect can be obtained in a canvas Paint event using the Clip method.

Set the clip in the top part, Draw Picture 1, set the clip area in the bottom part according to the scroll limit and draw Picture 2 into it. And so on.

Could even work with no clip and simply moving the Y of the DrawPicture.

5

HI Michel,

Thank you again for the suggestion. I do understand the basics of how to achieve it but I am unable to implement it properly and efficiently which is why I am looking for someone smarter than me to put it together and why I would pay for a proper implementation of it.

Thank you again,
Paul

6

I believe @Alain Bailleul had a parallax class that handled everything. Maybe contact him about it?

7

If it is for web, ABXPlay can handle parallax at high resolutions as it uses the speed of WebGL. (I’m now having my holiday, but if the closed source license for commercial use (as it is now) is a concern, don’t, as I’m planning to make ABXPlay and ABXVision open source/free for everybody when I’m back)

In pure desktop xojo you can download an old project here: http://gorgeousapps.com/ABParallax.zip But beware, pure Xojo is far behind other languages in graphics speed so do not expect good results at big resolutions.

8

Thank you, taking a look at the code!