Moving (image) opbjects on top of background

Hi Jean,

If you’re looking to make the drones fly in when they enter the viewport you’ll need to position the drones relatively to the page banner.

At the moment, I can see that they are child elements on the div below but they are transitioned to move them upwards. You’ll want to make them child elements of the banner if you want it to work with no contingencies.

You’ll want to remove the ‘swing-side’ class as this will cause issues and activate all 3 classes ‘.mavic1, .mavic2 and mavic3’. Once thats all done your want to write the CSS.

Here is some CSS which will help you do this sort of thing once they are moved.

.mavic1 {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    transition: all 1s;
    transform: translateX(100%);
}

.mavic1.scroll-triggered {
    right: 43%;
    top: 20%;
}

You’ll want to have all of the drones similar to this one just changing the starting position and end position.

This is into the realms of advanced CSS so if you don’t know advanced CSS positioning and transitions then I wouldnt recommend trying this.

Let me know how you get on:)

Thanks

Hi,

Thanks for the quick reply.

I’ll get an expert to get this working in the template.

I’m sure he’ll understand what to do here.

Thx.
Jean-Marie