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.
@hendon52… Do you have any thoughts on iPadOS and parallax features? From what I can research it looks like there will be no change for parallax with the upcoming iPadOS, however you would think with currently technology of the iPad(processor & battery life) should be able to handle parallax.
Thanks for all your detailed answers…
Well, you would thinks so, wouldn’t you. I guess the real issue is that iPads share the same OS as found on their iPhones, so I don’t see them making any changes in the near future. Apple have never been a great fan of animation effect that consume device resources (remember Flash). The strange thing is they use parallax effects quite a lot on their own sites, but their general view is is that it’s a passing fad that doesn’t really add much functionality to web sites. So many web designers implement these features without too much consideration as to the purpose - consequently, there are bad implementations that can cause user annoyance and confusion. Apple don’t see the need to put resources into making OS changes to accommodate something that could, very soon, become yesterday’s design fad.
Amen…or as the old saying goes, just because you can, doesn’t mean you should.
Before commenting again in this thread, I was waiting to see if one of you would implement a solution on your own Blocs-made site that looks nice on iOS before I gave it a shot. Interestingly, none of you have tried.
It’s not just Sparkle that tackles Parallax though. As mentioned before, Squarespace does it too. And I’ve not heard anyone say Squarespace has a “bad implementation” of parallax on mobile. That should be a compelling reason for Blocs to tackle it properly too (i.e., make parallax play nice on mobile devices).
Sometimes we lull ourselves to sleep by saying, “I have a modern website because it’s responsive and that’s enough.” But what really makes modern sites look snazzy and modern are effects like parallax. And since most people use mobile devices these days, having such effects work only on desktop and notebook computers isn’t really a good implementation at all. So I think parallax on mobile is important consideration now and will only be more so in the future.
Hi everyone, newbie here, and since everyone has so much free time these days, I decided to resurrect an old issue and give the code wizards something to work on!
I would like to get parallax working on mobile (iOS and iPad) for site I am trying to build. I’ve gone through some of @Eldar’s tutorials to learn, but this seems to be more in need of a code solution because blocs doesn’t support natively the implementation that works with iOS restrictions for the effect.
I’ve read the code above from @pealco and have built and example site using his code that gets a parallax working on mobile. But as I said, I am new, and coding is bit over my head. I see what the code is and how the different section classes worked on the different blocs, but I don’t fully understand what the “commands” are in the coding and how to manipulate those commands to get the page effect on my page.
I also just saw this more recent thread:
https://forum.blocsapp.com/t/any-idea-how-to-replicate-this-parallax-fx/
This seems like a different solution for getting parallax effects to work, but maybe @MDS has some ideas on a solution for this.
The desired page structure is 12 blocs that alternates between parallax and static with different images for some of the parallax backgrounds.
NO global header
bloc1-hero-nav - (12.jpeg) parallax background, hero bloc navbar, gradient overlay
bloc2-intro - static purple color background
bloc3-about - (12.jpeg) parallax background with gradient overlay
bloc4-coach - static no background img color
bloc5-services-hero - (camera.jpeg) pararlax background, gradient overlay
bloc6-services - static no background img or color
bloc7-tales - (7.jpeg) párallax background with overlays
bloc8-pricing - static no background img or color
bloc9-contact-hero - (3.jpeg) parallax background, gradient overlay
bloc10-contact-form - static no background img or color
bloc11-newsletter - (14.jpeg) parallax background, overlays
Bloc-placeholder - will add all referenced parallax images and hide visibility
bloc12-footer (global footer) - static no background img or color
I have built an example site of what I am trying to do and some mostly experiments with the code and different page structures. The example page does include a download link for the blocs project file:
https://www.tdadventure.com/parallax/
Looking at the navbar on the landing page, here are the links:
Hopefully the community can put it’s head together and help with a solution.
Thank you in advance!
