Parallax effect working on iOS (iPad and iPhone)

@Nakul Looking promising :slight_smile:

Can you please also explain (maybe with a little video) how to add this in Blocs? Would be great.

Hey @Nakul, thanks for your answer.
This is the Forum of and the Blocs Software. I looked at your YouTube video, but I don’t have any coding knowledge. So could you please tell me (or better add a video) how I can use your solution within the Blocsapp software.

Hey @Nakul,

You offer a parallax solution, but how do I implement this in Blocsapp?


Are you using Blocsapp yourself?? If not, you can’t help me. Maybe someone else can.

@Norm Hey Norn, can you add a solution to Blocs to get Parallax effect working on iPad and iPhone as well? Maybe with your new “build your own blocs” app?

Hi @Eldar,

I just saw your website and noticed you have parallax working on the iPad and iPhone. Can you please share the way you did that here on this forum? Thanks in advance!!

:stuck_out_tongue_winking_eye: The trick is, “that site is not Blocs”, but instead uses Squarespace.


Which uses one of the methods I mentioned above, ie: translate3D


Hi @MNL ,

This site was built with Squarespace, my second favorite tool for designing websites :slight_smile:


How is your course coming along?

Hey @Blocs_User,

I’m working hard to release it soon. At the moment, I’m busy with finishing the new updated version of Built with Blocs website and some new videos for Blocs Core Training.


So @Norm, what is the status of getting Parallax working on IOS? Are there any plans in the near future to have this feature for IOS within BLOCS? I have read a few forum posts on Parallax and IOS and don’t see any ways to implement or if it will ever be a BLOCS feature. It does looks like this may be something that is to difficult to implement within BLOCS to justify the time to provide Parallax feature.

The problem is the actual mobile browser blocs its use, which is obviously something we don’t have control over. There are work arounds but they tend to be very hacky and don’t always deliver the effect consistenty. It also effects the performance of sites (jerky scroll).

For Blocs 3 I’ve added a new kind of parallax effect that moves objects on scroll rather than backgrounds, it’s a different type of parallax effect, that is definitely in the works and will come later in the year.


Did this make it in the initial release of Blocs 3? If so how is this done?

Look at the website of Sparkle. Their parallax solution works good on iPhone and iPad devices. Maybe you can see how they did.

Your Blocs 3 app is excellent and a big step forwards. Thanks for developing such a great app.

I can confirm that even as of today in late June 2019, the parallax effect on the Sparkle website is still working on iOS devices. And yet, nobody since Nov. 2018 has been able to figure it out. Even on @Eldar’s otherwise excellent Mac Mini template, when you preview that on an iPhone and scroll down to “Cool Story” you see a “reply” button that makes absolutely no sense on iOS sense it doesn’t reply anything on iOS devices. So obviously, the template should probably be updated to hide that “replay” link on iOS devices, or figure out how to get parallax to work in Blocs such that it will display on mobile devices just as the Sparkle site can.

@Pealco, would you know the magic secret? :slight_smile:

Hello @JDW, I don’t know the secret, but there is a way to make it work in iOS and mobile devices:

Add 3 blocs, in the first bloc add the class “section-one”, the second bloc add a class “section-two”, and in the 3rd bloc add a class “section-three”.

Now lets say you want a parallax in the second bloc, then go to page settings -> add code, and add the following code:

.section-one {
	background:url('./img/red-leaves.jpg') no-repeat;
.section-two {

.section-two:before {
	background:url('./img/lanterns.jpg') no-repeat;
	position: fixed;
.section-three {
	background:url('./img/mountains.jpg') no-repeat;

It works in my iPhone and iPad…
Check It if you have an Android phone.

Hope it helps you…


Thank you for the code and suggestion, but it seems that the Blocs you used must be special. I created a new document and 3 Blocs but adding your code does not work. Here is my document: (219.3 KB)

One or two things to have to check:

  1. Lanterns.jpg; red-leaves.jpg; mountains.jpg have to be in the project (img folder)
    To view it in preview, you have to have this images in a image bric or in other place of the project, and hide them
    When you finish, just delete those image brics and export the site and then upload those images to the img folder. (It is nice if we can add images to the project manually like we do with css or js files, can this be achieved @Norm ?)

  2. You have to leave the Blocs you create without backgrounds or colors, so only the style from the code works.

  3. You can use whatever class you want to the 1st, 2nd or 3rd bloc but then you have to change that name in the code in the 4 places.

Regarding you zip I only can check it later, so with this help probably you will find out what the problem is.

Hope it helps you.

There is the example working:

1 Like

Okay, thank you. I have it working.

So the question now is this. Why doesn’t Blocs incorporate this trick such that we need only checkmark “Parallax” in the right sidebar and that’s it?

It doesn’t make much sense to offer Parallax if the vast majority of web visitors (i.e., mobile visitors) cannot see it. I’d love to hear @Norm share his thoughts on it.


I think the answer lies in “best practice”. iOS in particular doesn’t like things such as events that control parallax effects on desktop browsers. Android devices can cope with it relatively well, although some versions of the OS can produce choppiness or stuttering (much to the annoyance of users). The issues centre around drains on resources. So, there isn’t really a simple on/off solution to deal with parallax on mobiles so you have to be prepared to create an alternative method that looks like parallax scrolling, such as the method highlighted in this thread.

The reasons that apps like Sparkle can cope with it better is that you are effectively creating a number of different websites for different device sizes (its not responsive - it’s adaptive) this makes it much simpler to incorporate solutions that work on all devices. However, that said, I have had client issues with some sparkle made sites where choppiness and jumping have appeared on some mobile devices. On some OS versions, parallax doesn’t work at all. So, it’s still a bit of a hit or miss exercise. Furthermore, the background images have to go into a full width container both in Sparkle and blocs, which means that background images extend well beyond the edges of the device screen (the images do not scale). Therefore, you have to select images where the central portion only is relevant to the site. You can see what I mean below: The first image is the desktop version with a parallax background and it’s quite easy to see what the image is about. In the second image, the mobile version retains its height proportionately but chops off a significant amount of the left and right of the image. If the main subject of your images isn’t able to fit into these confines, it becomes a meaningless image, so it’s often better to use static images on mobile variants.

I guess the best we could hope for as standard feature in Blocs is to have two parallax options which can be turned on or off for different types of device. Alternatively, we could just have one option that uses the method shown in this thread. That could work on all devices, but may create problems for some mobile users.


@hendon52 very well explained… thank you…
Apart of this,

This is great if it can be achieved.