I use a background picture with parallax effect.
The side works perfectly with my browser on the imac. But not on my iphone and the ipad. The parallax effect is not working.
I checked all the settings in blocs, but cant find the mistake…
Can anyone help me…?
The problem is not the phone, cause other sides with parallax effect are working.
Hope that anybody could help. Greetings from Germany
The parallax effect built into Blocs doesn’t work on smaller devices, by design.
There is a a big debate, on the web in general about using parallax on mobile devices due to performance issues. Although these days, some methods seem to work better than others. For the moment if you want to have parallax across all breakpoints you will need to implement it yourself, at least for the moment anyway.
I agree with @PeteSharp. It not really a Blocs Issue, its a mobile device issue - more specifically, a touch screen issue. In an attempt to limit script execution on scroll events, mobile browsers deliberately don’t support this function. Of course, there are ways to circumvent the limitation. However, you do risk your site visitors suffering performance issues. Here is a recent blog post on the subject:
One of the largest criticisms of the parallax scrolling effect is its poor performance on mobile devices. Parallax effects appear broken or choppy on mobile devices because mobile web browsers are designed to limit script execution upon scroll events.
A good web designer will understand this in advance and plan for a static or mobile-optimized version of the website that essentially “turns off” the parallax effect when the mobile environment is detected. The website will look exactly the same in its static state, we just remove the movement of design elements and the requirement of the mobile browser to call external scripts to perform the calculations their desktop cousins can do more easily.
Thank you very much for your help!
I’m just wondering, why blocs don’t let me choose if I want to use the parallax effect on mobile devices or not. Because now the background images are not looking very good on mobile devices. Cause in every block the image begin on the top and doesn’t fit together from block to block.
Its a bit frustrating… as you can see… www.birgitsterly.de
Or do you have a solution for this?
Thank you again for your time!
Greetings
Hi @Bigwig.
Just so you understand the situation. You can create a parallax effect by adding some simple CSS, The problem is the background-attachment style that is vital to it working isn’t very well supported by mobile devices, usually not at all. So you need to use a completely different solution.
Enter JavaScript. It is possible to use something like this to have multi device Parallax support.
You could simply create some mobile specific-blocs on the page. These can be styled to look better on mobile devices. Once created, you would use the visibility options to display or hide blocs on specific devices. Although you will see all the blocs in your blocs project, only those that have been set as visible to certain devices will be displayed on those devices.