Nahlee Posted June 27, 2020 Share Posted June 27, 2020 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? Link to comment
tuanphan Posted August 24, 2020 Share Posted August 24, 2020 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) } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MEva Posted July 20, 2022 Share Posted July 20, 2022 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? Link to comment
tuanphan Posted July 21, 2022 Share Posted July 21, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment