kaydotjpg Posted September 16 Share Posted September 16 Site URL: https://fromtreetosea.squarespace.com/ https://fromtreetosea.squarespace.com/shop/p/dancing-tigers-vase password: remyboo Hi! I have a really fun animation code I am using where there's a flying image across the screen as you scroll. Part of the code belongs in CSS, and another part belongs in the footer injection area (see below for both codes I'm using). I installed it and it worked perfectly. However, I realized that I just wanted this code to appear on the homepage only. So I added the collection ID to CSS. I was happy when I noticed this fixed this issue, until I scrolled down to the footer on all other pages and noticed the image sitting at the bottom of the footer. Any help? // CSS CODE // #collection-66e1f85031ff720c814003e3 { .flier { pointer-events: none; } .flier > * { /* Adjust animation duration to change the element’s speed */ animation: fly 80s linear infinite; pointer-events: none !important; top: 0; left: 0; transform: translateX(-120%) translateY(-120%) rotateZ(0); position: fixed; animation-delay: 5s; 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) } } //FOOTER CODE// <div class="flier"><img src="https://i.ibb.co/K2Vndjg/Untitled-design-2024-09-15-T092559-028.png" width="200"/></div> Link to comment
Solution JayVanDyke Posted September 16 Solution Share Posted September 16 @kaydotjpg try this in your Custom CSS body:not(#collection-66e1f85031ff720c814003e3) .flier { display: none; } //the homepage also gets a .homepage class so you don't need the collection ID body:not(.homepage) .flier { display: none; } kaydotjpg 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 🛠️ Web Designer's Toolkit **some of these contain affiliate links 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