Cinematic Bloc Backgrounds 🎥

Custom Interaction Lab
1

Good morning everyone, I have a new Custom Interaction experiment to share with you all today.

In this one I have created an animation that changes the background image of a Bloc with a nice cinematic zoom. :movie_camera:

This effect is created with a single Custom Interaction and 5 classes.

Bloc Backgrounds

The Classes :paintbrush:
This experiment requires a class for each background image (background-1, background-2, background-3). These classes just have the background image assigned.

bg image class
bg image class1056×574 65.7 KB

A class to handle the zoom animation (animate-bg).

Animation class
Animation class1020×692 71.8 KB

And a class to position the images correctly on the mask layer (loop-bg).

bg class
bg class1030×716 75.9 KB

The Mask :performing_arts:
Like my previous rotating gradient background experiment, I’m going to use the mask layer again.

  1. I’ll set the mask to solid with a 50% colour fill.

Set mask fill to 50%
Set mask fill to 50%886×814 232 KB

  1. Next I’ll select the mask in the layer tree and apply an ID to it #overlay-mask.

Add id to mask layer
Add id to mask layer860×506 122 KB

  1. Finally I’ll assign the initial classes to the mask layer that will show the first image (background-1) and set the background image positioning (loop-bg).

add initial classes to mask
add initial classes to mask812×460 111 KB

The Interaction :zap:
The custom interaction for this experiment uses 8 rules to create the looping background image zoom effect. It basically applies a new class to the #overlay-mask for each background image every 3 seconds and then re-loops on itself (repeats).

Interaction-Info
Interaction-Info3176×1297 326 KB

Finally, I assign this interaction to be triggered on page load.

page-load
page-load730×340 50.7 KB

That’s a wrap, the cinematic zoom experiment is complete. :partying_face::champagne:

Adding more images :stars:
If you wanted to extend this to use more images you would need to create additional background classes (background-4, background-5), extend the interaction rules to add those classes and finally adjust the transition time in the animate-bg class so the zoom lasts the entire run time of your interaction (this can be calculated by combining all of the interaction pauses).

You can download this experiment here. :point_down:

Bloc Image Background Loop.bloc (669.9 KB)

Have fun and a great weekend :beers:

Future improvements :hammer_and_wrench:
I wanted to add a transition fade between images on this but it required more classes and was a little more technical, I thought since its early days for the interaction manager I would keep it as simple as possible. I’ll probably come back to this one with improvements in the future.

16 Likes
2

Great job :nerd_face: the motion to image! I really like it! :star_struck:

1 Like
3

Very nice - would it be easy to add a fade between the images or not? I assume the difficulty would be the jump when it loops.

1 Like
4

As I mentioned in the future improvements section, yes, it’s a bit more technical. Maybe a one for the future.

3 Likes
5

Brilliant @Norm - looking at doing something like this for a website I have in mind.

I was originally going do it as a video with a Ken Burns effect, which still might be a possibility, but would prefer to do it with images…the future improvement with fade will be the icing on the cake - I might have 20 mins playing around see if I can do it at the weekend if I can squeeze it in - along side work, playing golf and cheering the Villa on to another win on Sunday !

Have a top weekend all - but more important…keep safe.

2 Likes
6

This is great. Any work around if the bric isn’t the very top of the page? The image on zoom is going over a sticky bar we have at the top of the page.

7

HI all,

I have spent a good hour trying to get the images to fade nicely.
Now I did achieve this by targeting the background images and playing with the transform and transitions, but I always get the 1st image to zoom in fast! and it stutters a few times and then after its looped once - it looks nice !!!

I then targeted the loop and then the animation class but no avail !!!

I do not need this as yet - but was hoping I could get it fading for future use!
Anyone else tried and had any luck…if so, please share your findings!

8

@norm @AdieJAM
How do I stop the image from overlapping the bloc below (e.g. paragraph) when it is zooming?

9

Hello @Norm,

This is really great, thanks for it. To re-create an older RW website I was searching for exactly this feature :slight_smile:

Best
TomS

1 Like
10

Hi @pixelarte

Sorry, just saw your posted this - been reading things while on the go a lot.

I have only tried it on a full screen bric but should work like any other image I guess?

Did you sort it?

11

@TomS2 and others - have you managed to get the images to fade into one another ? I have tried a while to do this and can’t seem to get it to - so not sure the best way to do it. I am trying to create a Ken Burns type of effect and get it fading into the other image.

I know it’s possible ! but trying to find out how !!!

If anyone knows…please share ! Cheers

12

@AdieJAM , sorry did not manage this, yet. There is a hard transition when the next picture loads.

However I did realize that the complete canvas can be dragged to the left and to the right leaving a white page… (I am using this interaction together with Minimalist Library 2.6).

Regards TomS