Satori2046 Posted March 1, 2020 Share Posted March 1, 2020 Site URL: https://octagon-garlic-ejcr.squarespace.com/ Hello friends, I was wondering if it was possible to have an intro video that will enable before accessing directly to the main website page. So basically when people enter my website : 1/ An animated logo launch 2/ At the end of the logo, the website unfolds. Also was wondering what size is usually recommended for this kind of intro. Thanks ! Link to comment
tuanphan Posted March 2, 2020 Share Posted March 2, 2020 Add to Code Injection Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5db97e10780a6c1bc1b16e3e/1572427397438/?format=1500w"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script> Replace with your logo url Satori2046 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
Satori2046 Posted March 2, 2020 Author Share Posted March 2, 2020 Hey Tuanphan, Thanks again for your precious help, so your code works perfectly with a picture or a gif image. But is it possible with a video file ? Cheers ! Link to comment
tuanphan Posted March 2, 2020 Share Posted March 2, 2020 6 hours ago, Satori2046 said: Hey Tuanphan, Thanks again for your precious help, so your code works perfectly with a picture or a gif image. But is it possible with a video file ? Cheers ! You can convert video to gif Will take time to check code for video, and it's outside the free support range at the forum. You can also post this to some groups at the link in my signature, hoping someone will have the code. 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
Brandijoan Posted April 11, 2020 Share Posted April 11, 2020 @tuanphan Thank you so much for this code! Is there anyway to make it play only on the homepage? Link to comment
tuanphan Posted April 11, 2020 Share Posted April 11, 2020 4 hours ago, Brandijoan said: @tuanphan Thank you so much for this code! Is there anyway to make it play only on the homepage? add to Homepage Settings > Advanced > Header Brandijoan 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
James-Affixxius Posted December 12, 2022 Share Posted December 12, 2022 @tuanphan We've got this working on our site but wondered if it's possible to have it so that website visitors are only shown the .gif once when they click through to the homepage for the first time and not every time the site visitor revisits the home page? Link to comment
tuanphan Posted December 20, 2022 Share Posted December 20, 2022 Use this code, if you want to use video <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <video class="logoload"> <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video> <style> .logoload { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </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
newisnice Posted June 13, 2023 Share Posted June 13, 2023 how do you set your image in this code? where do I get my image URL? Thanks! Link to comment
tuanphan Posted June 15, 2023 Share Posted June 15, 2023 On 6/13/2023 at 8:27 PM, newisnice said: how do you set your image in this code? where do I get my image URL? Thanks! Suppose image name is mountain.png and your site is: newins.squarespace.com You can follow this guide to upload image https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files then the image url will be: https://newins.squarespace.com/s/mountain.png 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
jrosenblum91 Posted October 22, 2023 Share Posted October 22, 2023 I've inserted the code with a link to the mp4, but get a white page that briefly appears before the homepage loads. Any idea why the video is not showing? Link to comment
tuanphan Posted October 26, 2023 Share Posted October 26, 2023 On 10/22/2023 at 7:09 PM, jrosenblum91 said: I've inserted the code with a link to the mp4, but get a white page that briefly appears before the homepage loads. Any idea why the video is not showing? Can you share link to your site? We 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment