bhua_2022

Thank you so much! It works!

@karan That did it! One more follow up question; Any chance I can tweak the code so that it really only shows once, now it shows every time you get redirected to the project page, which is often! Also are you seeing it being cut-off out of frame as well?

@Beyondspace That did indeed do the trick! However now it sticks to the top of the page, it does not go away once it finishes the 4sec video, any code I can add to this so it moves out of the frame? Secondly, it seems extremely zoomed in, it does not listen to the 100% width coding

Can someone please help us with an autoplay of a video as a landingpage for the website. We have a short 4 second video that we would like to play before you enter the actual website (its a logo video). Now did we find a similar code here on the forum, however the video doesn't play for us. It stays as a still frame for some seconds? and then has an action to take the frame out of sight to show the website. We would also like for this action, the sliding to the left bit, to not be there. A simple fade out would be best. Could someone maybe tell us where in the code we go the wrong direction? 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>

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>

<!-- 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.

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/

exactly what I mean yes! Have it full-size, but only that first header image.

Hi, for our index page we use a lot of whitespace and page padding all around, however, for the actual project pages we would like the first header image to be fullscreen (no whitespace or padding around) and then the rest of the content should be within that page padding again. We work with an Avenue Template and preferably don't want to see any whitespace for the site header/title either if possible. We do want a title + subtitle as an overlay over this image, but this we can manage in the image style settings + spacers I think. Does anyone know how to fix this? This page is an example > https://www.burtonhamfelt.nl/projects/#/docklands/ Thank you!

https://www.burtonhamfelt.nl/projects/

Hi there! Could someone please help me with a css code for my Avenue template. I would like for the thumbnail titles to work as a hover overlay per index image, but have the thumbnail title underneath the image instead of in/on it. Earlier I had received this code from @tuanphan /* Test something */ .index-thumb-title-position-overlay #projectThumbs .project .project-title { transform: unset !important; opacity: 1 !important; top: unset !important; bottom: unset !important; color: black !important; margin-top: 5px; } a.project { overflow: visible !important; } This did do the trick for having the thumbnail title underneath the image without it adding additional padding space underneath, but the hover action is not working here, neither is it perfectly centered per image. Does anyone know what to add/substract from the code to make it work like a 'centered fading/showing when hovering' title underneath each project image. Thank You in advance!

Hello, We have a problem about page structure, We do understand how to change and play with the spacer blocks but whatever we try, the outcome stays that it looks different on different types of devices. The layout of the project pages on our website should all look similar, but unfortunately it looks different on my laptop (MacBook) than on my colleagues computer (LG). This problem is not only limited to the brands of the computers but also to the devices: phone and tablet. How can we arrange it in a way it looks similar everywhere? And, if we need to code for this, which code do we need and how do we do this? …because we have never done this before.