ThomasHanley Posted January 18, 2022 Share Posted January 18, 2022 (edited) Site URL: https://mustard-antelope-r3yf.squarespace.com/<div class="splash-wrapper"> <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/> </div> <style> header.Header.Header--top { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; } div#jb--job-board { margin-top: 133.5px; } </style> <style> .splash-wrapper { position: fixed; z-index: 9999; background-color: #ffffff; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; } @keyframes .splash-wrapper { 100% { opacity: 0; } 50% { opacity: 0; } 0% { opacity: 1; } } </style> This is the code that I want to inject into the header so there is the animated gif when loading pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it PASSWORD : 123 Edited January 18, 2022 by ThomasHanley Link to comment
Beyondspace Posted January 18, 2022 Share Posted January 18, 2022 28 minutes ago, ThomasHanley said: Site URL: https://mustard-antelope-r3yf.squarespace.com/ <div class="splash-wrapper"> <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="100" height="auto"/> </div> <style> header.Header.Header--top { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; } div#jb--job-board { margin-top: 133.5px; } </style> <style> .splash-wrapper { position: fixed; z-index: 9999; background-color: #ffffff; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; } @keyframes .splash-wrapper { 100% { opacity: 0; } 50% { opacity: 0; } 0% { opacity: 1; } } </style> This is the code that I want to inject into the header so there is the animated gif when loading pages. However when I run this it does let me edit the page and doesn't allow you you navigate the navigation bar. THE Animation is to long and im not sure how to fix it PASSWORD : 123 Try changing the z-index in this code to z-index: 0; Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ThomasHanley Posted January 18, 2022 Author Share Posted January 18, 2022 5 minutes ago, bangank36 said: Try changing the z-index in this code to z-index: 0; Let me know how it works on your site I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage. Link to comment
Beyondspace Posted January 18, 2022 Share Posted January 18, 2022 5 minutes ago, ThomasHanley said: I changed the z-index to 0 and it still doesn't allow for me to interact with the webpage. It 's still 9999 Have you saved your setting yet? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ThomasHanley Posted January 18, 2022 Author Share Posted January 18, 2022 6 minutes ago, bangank36 said: It 's still 9999 Have you saved your setting yet? Ive have saved it, try now Link to comment
ThomasHanley Posted January 18, 2022 Author Share Posted January 18, 2022 2 hours ago, bangank36 said: It 's still 9999 Have you saved your setting yet? this fixed it <div class="splash-wrapper"> <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/> </div> <style> .splash-wrapper{ position: fixed; z-index: 9999; background-color: #ffffff; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 1; } @keyframes slideOut{ from{margin-left: 0vw; opacity: 1;} to{opacity: 0; margin-left: -150vw;} } </style> if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity? Link to comment
Beyondspace Posted January 18, 2022 Share Posted January 18, 2022 22 minutes ago, ThomasHanley said: this fixed it <div class="splash-wrapper"> <img src="https://static1.squarespace.com/static/61d6d4735161ce457e0d2347/t/61e13e9917cc384fe1633c75/1642151578200/intro.gif" width="300" height="auto"/> </div> <style> .splash-wrapper{ position: fixed; z-index: 9999; background-color: #ffffff; height: 100vh; width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; animation-name: slideOut; animation-fill-mode: forwards; animation-duration: 2s; animation-delay: 1; } @keyframes slideOut{ from{margin-left: 0vw; opacity: 1;} to{opacity: 0; margin-left: -150vw;} } </style> if i had to guess the way i had it was setting the opacity to 0 but wasnt disabling it when it hit 0 opacity. So i have to have it going off to the side unless they is a way to disable keyframes animation when it hits 0 opacity? It looks like you figured it out, doesn't it? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! 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