Parallax effect working on iOS (iPad and iPhone)

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

com--Squarespace


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

:wink:

Hi @MNL ,

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

:grin:

How is your course coming along?

https://store.eldargezalov.com/building-a-website-in-squarespace

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? :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:

<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…

@Pealco

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:

  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:
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

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

This is great if it can be achieved.

@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.

1 Like

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.

5 Likes

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:

  1. Parallax page - mockup of the page I am trying to build with parallax for mobile (doe not have any of the code from this thread)
  2. Working code page - blank page with the code described in this thread.
  3. Experiment page - without changing the code, I added blocs before the “section-one” class bloc and it changed how the parallax effects functions
  4. Hero page - added hero structure without an image in the “section-one” class bloc
  5. Navbar - added a navbar in the global header
  6. Download - link to a zip of the blocs project file
  7. Scroll - testing for a “scroll to” link in the navbar

Hopefully the community can put it’s head together and help with a solution.

Thank you in advance!