Parallax effect working on iOS (iPad and iPhone)

I Need Help
1

Hi all,

I consider myself as a beginner in making websites and not afraid to learn new things. I looked and some web building apps before and the Black Friday discount got me at blocsapp. (The choice was between Blocsapp and Everwebapp. Everwebapp is more easier for beginners, but the look and feel and the YouTube videos from @Eldar , let me decide to buy Blocsapp)

So far the introduction. Now I want to use parallax effects not only on the desktop, but also on my iPad and iPhone. How can I do this with Blocsapp?

In Everwebapp they have widgets for this effect, see this website.

Here a example of a working website with parallax effect, which I found with google.
https://www.wahnamhong.eu/

I hope someone can give me a direction. Remember I am new to Blocsapp and a beginner with website designing!

Mark

2

Presently, Blocs simply uses the CSS “Position Fixed” property for its Parallax effect, which is disabled on most mobile devices due to performance issues with this CSS property. So with Blocs your only current option is the implement a different solution on your own, if you wish to have the effect on mobile devices.

The EverWeb example you posted, instead uses modern CSS properties (transform, translate3D, etc.,) to achieve the Parallax effect and allow it to work on mobile devices.

1 Like
3

@Blocs_User … And that is exactly what I don’t know how to do as a beginner without coding knowledge. Would be nice if there is a working bloc/bric for that :wink: like the Everweb example I posted. They use widgets for this. Simple drag and drop and configure in the sidebar.

5

@Nakul Looking promising :slight_smile:

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

7

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.

9

Hey @Nakul,

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

image

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

10

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

11

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

12

: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

Squarespace-parallax-translate3d
Squarespace-parallax-translate3d886Ă—634 55.2 KB

:wink:

13

Hi @MNL ,

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

14

:grin:

How is your course coming along?

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

15

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
16

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.

17

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
18

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

19

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.

20

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:

21

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…

22

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

23

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