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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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