Emily233567 Posted March 13 Share Posted March 13 I'm glad I found this thread. Your suggestions were spot-on! Link to comment
bhua_2022 Posted March 19 Share Posted March 19 On 12/7/2023 at 3:24 PM, tuanphan said: updated code, I added some attributes, you try adding it again, if it still doesn't work, try moving the code to Code Injection > Header, if it still doesn't work, you can keep the code, I can check again easier As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again. We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page. I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action. our site: https://www.burtonhamfelt.nl/ Link to comment
tuanphan Posted March 21 Share Posted March 21 On 3/19/2024 at 11:01 PM, bhua_2022 said: As a further question to this code: Would it be possible to attach this code to the index-page and be visible only once, when you first open the page and then not again anymore, until you revisit the site again. We refer back to the index page every sub-page, but now that action happens every time you redirect yourself to that main index page. I applied the code to the footer of the specific index page (All projects/ .sqs-gallery-design-autocolumns), but that doesn't solve the reoccurring of the logo action. our site: https://www.burtonhamfelt.nl/ I see some code in this thread, which code did you use? I can adjust for your site easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bhua_2022 Posted March 21 Share Posted March 21 14 minutes ago, tuanphan said: I see some code in this thread, which code did you use? I can adjust for your site easier <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/> </div> <style> div#loader-container img { max-width:150px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: .65s; animation-delay: 1s; top: 0; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 150px; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -600vw; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> ////////////// the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time. Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 3:49 PM, bhua_2022 said: <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <img src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/65f9bcbd71c39d12a15aae94/1710865597709/BurtonHamfelt+-+Logo+-+2024+-+white.png"/> </div> <style> div#loader-container img { max-width:150px; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: .65s; animation-delay: 1s; top: 0; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 150px; } @keyframes slideOut { from { margin-top: 0vw; } to { margin-top: -600vw; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> ////////////// the image I would like to switch with a 2second video in the end. This code works perfectly, only does it show up every time you're redirected to the indexpage, which is often. I would like to alter the code so that it pop-ups only once when you enter the site for the first time. You can use script code under your code <script> // Check if the animation state is stored in sessionStorage const isAnimationPlayed = sessionStorage.getItem("animationPlayed"); // Reference to the splash-wrapper div with a specified ID const splashWrapper = document.getElementById("loader-container"); // If the animation has already played, hide it and remove it from the DOM if (isAnimationPlayed) { splashWrapper.style.display = "none"; splashWrapper.remove(); // Remove the splash wrapper from the DOM } else { // If the animation hasn't played yet, mark it as played and store it in sessionStorage sessionStorage.setItem("animationPlayed", "true"); } </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bhua_2022 Posted June 12 Share Posted June 12 (edited) Hi Tuan! @tuanphan We now have decided on which video to use for the landing-page, however I can't seem to make the video play automatically when entering the website. It looks as if it just sits there as a still frame, with an odd crop? Could you please help me tweak the code? Secondly, I would like for the video, when finished playing, to just disappear and not do that slide to the left anymore. But just be gone with no extra effect, or if an effect is needed maybe a fade out? Hope you can help me! website: Burton Hamfelt videolink (added into the squarespace files): https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4 Code used: <!-- Container for the splash screen with a specified ID --> <div class="splash-wrapper" id="loader-container"> <video src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"/> </div> <style> div#loader-container video { max-width:100%; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: 0.5s; animation-delay: 3s; top: 0; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> Edited June 12 by bhua_2022 Link to comment
lisanemetz Posted July 1 Share Posted July 1 Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏 I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think. https://hollen-hollenplus.squarespace.com Password: Tester Thanks so much! Link to comment
tuanphan Posted July 3 Share Posted July 3 On 7/1/2024 at 10:24 PM, lisanemetz said: Hi there, any chance you could help me with a specific request as well @tuanphan? 🙏 I'm trying to add a loading page to the below website - only whilst the homepage is loading, not between transitions of the page. I tried the codes in this thread but they all seem to apply to the whole website. I've attached the .gif I'd like to add alongside some some text on a black background, but I can adjust this later I think. https://hollen-hollenplus.squarespace.com Password: Tester Thanks so much! Tester password is incorrect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted July 10 Share Posted July 10 On 7/3/2024 at 12:21 PM, tuanphan said: Tester password is incorrect Hey @tuanphan, sorry it's lower case t - 'tester'. Could you have another look please? 🙏 Thanks! Link to comment
tuanphan Posted July 13 Share Posted July 13 On 7/10/2024 at 3:05 PM, lisanemetz said: Hey @tuanphan, sorry it's lower case t - 'tester'. Could you have another look please? 🙏 Thanks! Use this code to Homepage Header Injection <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted July 15 Share Posted July 15 On 7/13/2024 at 9:42 AM, tuanphan said: Use this code to Homepage Header Injection <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you! Link to comment
matt_thewalkcreative Posted July 17 Share Posted July 17 (edited) On 7/13/2024 at 8:42 AM, tuanphan said: Use this code to Homepage Header Injection <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-color: white; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> This is exactly what I'm looking for to add to a client's website. Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo? Edited July 17 by matt_thewalkcreative Link to comment
tuanphan Posted July 19 Share Posted July 19 On 7/15/2024 at 2:19 PM, lisanemetz said: Thank you @tuanphan 🙌 is there a way of customising it, so that it only loads when opening the homepage, not all the other pages on the site? Thank you! You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages body:not(.homepage) #loader-container { display: none !important; } On 7/17/2024 at 3:36 PM, matt_thewalkcreative said: This is exactly what I'm looking for to add to a client's website. Is there a way @tuanphan to add a full-screen background image for desktop + mobile behind the animated logo? Use this new code, replace Pixabay with your background image url <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> matt_thewalkcreative 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
matt_thewalkcreative Posted July 23 Share Posted July 23 On 7/19/2024 at 10:45 AM, tuanphan said: You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages body:not(.homepage) #loader-container { display: none !important; } Use this new code, replace Pixabay with your background image url <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> That's great! Thank you – I'll give this a try. Link to comment
lisanemetz Posted July 24 Share Posted July 24 On 7/19/2024 at 11:45 AM, tuanphan said: You can move code to Homepage Header Injection. Or you can use this code to Custom CSS to hide it on other pages body:not(.homepage) #loader-container { display: none !important; } Use this new code, replace Pixabay with your background image url <div class="splash-wrapper" id="loader-container"> <!-- Lottie animation player --> <img src="https://content.invisioncic.com/p289038/monthly_2024_07/_HOL_Symbol_colour.thumb.gif.3eecee5b0f88720d40b9d54283bcef46.gif"/> </div> <style> div#loader-container img { max-width:500px; position: relative; } /* Loader animation styles */ .splash-wrapper { display: none; /* Initially hidden */ position: fixed; z-index: 9999; background-image: url(https://cdn.pixabay.com/photo/2024/06/01/12/35/ceiling-8802142_1280.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; 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: 0.65s; animation-delay:10s; } @keyframes slideOut { from { margin-left: 0vw; } to { margin-left: -100vw; } } @media screen and (max-width:767px) { div#loader-container { background-size: cover; } div#loader-container img { max-width: 300px; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function () { setTimeout(function(){ $('.splash-wrapper img').fadeIn(500); }, 3000); }); </script> Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much! Link to comment
tuanphan Posted July 26 Share Posted July 26 On 7/24/2024 at 9:34 PM, lisanemetz said: Thank you so much! This worked (the CSS option) - the only thing is that now when any of the other pages (not home) are loading, the screen turns white and then orange. Is there a way of making this just black if the page takes a moment to load? Thanks so much! Can you share site url? I can check problem easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted August 1 Share Posted August 1 On 7/26/2024 at 11:18 AM, tuanphan said: Can you share site url? I can check problem easier Yes of course, it's https://hollen-hollenplus.squarespace.com/ and password is tester Thanks! Link to comment
tuanphan Posted August 3 Share Posted August 3 On 8/2/2024 at 3:46 AM, lisanemetz said: Yes of course, it's https://hollen-hollenplus.squarespace.com/ and password is tester Thanks! I tried a page and it still shows orange all time https://hollen-hollenplus.squarespace.com/hollenplus Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted August 12 Share Posted August 12 On 8/3/2024 at 10:57 AM, tuanphan said: I tried a page and it still shows orange all time https://hollen-hollenplus.squarespace.com/hollenplus Thanks - yeah exactly. Is there a way of making it black instead of orange? Thanks! Link to comment
tuanphan Posted August 15 Share Posted August 15 On 8/12/2024 at 7:10 PM, lisanemetz said: Thanks - yeah exactly. Is there a way of making it black instead of orange? Thanks! You mean make whole page black, instead of orange?? I think you can edit section > Change color Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (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