CSS for an image that moves across the screen

Site URL: https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen

I found this example on Cargo for an image that moves across the screen continuously:

https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen

But I can't seem to find CSS that works for Squarespace in the same way. Do I need to set this up using Jquery?

Add to Code Injection Footer

<div class="flier"><img src="https://cdn.pixabay.com/photo/2020/03/09/14/54/seychelles-4916045__340.jpg" width="200"/></div>

and add this to Home > Design > Custom CSS

.flier {
	pointer-events: none;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 50s linear infinite;
        pointer-events: none !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}

On 8/24/2020 at 9:11 AM, tuanphan said:

<div class="flier"><img src="https://cdn.pixabay.com/photo/2020/03/09/14/54/seychelles-4916045__340.jpg" width="200"/></div>

@tuanphan I'm using this on a site but how do I get it not to appear in the below the footer of pages that don't have the .flier image flying on?

19 hours ago, MEva said:

@tuanphan I'm using this on a site but how do I get it not to appear in the below the footer of pages that don't have the .flier image flying on?

Can you share site url?

@tuanphan is there a way to do this with a personal plan?

On 10/14/2024 at 10:42 PM, kaydotjpg said:

@tuanphan is there a way to do this with a personal plan?

 

You can add code to Site Footer Code Block, instead of Code Injection. It is HTML code so Personal Plan supports it