Nahlee 0 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 post
tuanphan 8,979 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) } } You can send your question to my email to get detail answer. / How to Setup Password & Share URL --- Happy New Year Link to post
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment