Video parallax effect on Blocs

Tips and Tricks
1

Hi. I wanted to contribute with a little trick, I know that many of you would like to have a parallax video as a background which at the moment is not possible in blocs.

To do this we have to create 2 custom classes for example:

.hero-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -9999;
}
.hero-wrapper video {
  width: 100%;
  max-width: 100%;
}

First, we set the width and height to auto
and the min-width and min-height to 100%

Captura de pantalla 2022-02-14 a las 14.59.07
Captura de pantalla 2022-02-14 a las 14.59.07714×637 52.4 KB

The position to fixed;
bottom: 0;
right: 0;

and z-index: -9999;

Captura de pantalla 2022-02-14 a las 15.01.49
Captura de pantalla 2022-02-14 a las 15.01.49714×890 65.8 KB

After we create another custom class called

.hero-wrapper video

with the width on 100% and max-width: 100% swell.

Captura de pantalla 2022-02-14 a las 15.04.12
Captura de pantalla 2022-02-14 a las 15.04.12702×621 37.8 KB

Now just add a video and insert the class in the row where you have it and you’re done.

I hope it helps :slight_smile:

Captura de pantalla 2022-02-14 a las 15.08.30
Captura de pantalla 2022-02-14 a las 15.08.30769×371 12.8 KB

5 Likes
2

Best Forum Ever, It’s so cool to have help like this! :smile:

@Stewie_Griffin, would you be willing to share the the live results?

2 Likes
3

Sure, but its a site im still building. :slightly_smiling_face:

4

I understand, I just appreciate what you did share. I’m in learning mode, so this help me personally.

5

Happy to know that :blush:

6

I think you can also use this for background images?

7

Yes but for images you can use the native parallax on blocs :slight_smile:

8

Hey i wanna know if i add a third party external javascript html and css in bloc app directory. Will i be able to tweak the effects and animations inside the blocapp features or What? More over does blocsapp support canvas blob animation?

9

Hi @Stewie_Griffin,

Is it possible that you could create a test blocs file with video parallax info set up and make available to the forum? You don’t need to add the actual video file to the test blocs file. I can add a test movie later. I tried adding your info to one of my existing blocs site files, but couldn’t get video working in parallax mode.

Thx.

pruthe

10

Sure, I will do it tomorrow :slight_smile:

2 Likes
11

Man, you are a genius! Thank you very much for this information, is invaluable.
Cheers!

1 Like
12

Here is the video for you to see how it works and the example in blocs. :slight_smile:
Parallax Video.bloc.zip (142.2 KB)

2 Likes
13

welcome :))

14

Brilliant, thank you for sharing. :smile:

1 Like
15

@Stewie_Griffin,

Thank you so much for providing this test blocs file. Very much appreciated!!! :slight_smile:

pruthe

1 Like
16

Welcome, happy to help :slight_smile:

17

Thanks, man good stuff!

1 Like