@Nakul Looking promising 
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 Blocsapp.com 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 https://eldargezalov.com 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!!
The trick is, âthat site is not Blocsâ, but instead uses Squarespace.
Which uses one of the methods I mentioned above, ie: translate3D
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.
3 Likes
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.
4 Likes
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? 
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:
<style>
.section-one {
position:relative;
background:url('./img/red-leaves.jpg') no-repeat;
z-index:9;
}
.section-two {
position:relative;
}
.section-two:before {
content:'';
background:url('./img/lanterns.jpg') no-repeat;
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
}
.section-three {
position:relative;
background:url('./img/mountains.jpg') no-repeat;
}
</style>
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:
ParallaxNotWorking.bloc.zip (219.3 KB)
One or two things to have to check:
-
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 ?) -
You have to leave the Blocs you create without backgrounds or colors, so only the style from the code works.
-
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:
Blocs.pt
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.
Thanks.
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.
2 Likes