FERROD

This are the codes I USED CODE INJECTION HEADER <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="https://static1.squarespace.com/static/664d36ff1a5c8a242694306d/t/668f123f1005243876af0f16/1720652351935/A+Celebrar+la+vida+a+celebrar+el+amor.png" alt="A Celebrar la vida, a celebrar el amor T"></span></span> </div> CODE FOOTER <script> document.body.classList.add("stop-scrolling"); window.onload = function() { document.body.classList.remove("stop-scrolling"); document.getElementById("header").style.visibility = "visible"; document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> CSS .stop-scrolling { height: 100%; overflow: hidden; } #header { visibility: hidden; } .loadingscreen { position: absolute; background: #000000; opacity: 1; z-index: 2000; width: 100%; } .loadingscreen > .loading { background: #000000; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: left; } .loading img { height: auto; width: 200px; } .logo-pulse{ animation-name: slideide; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }

Hi, I want to create a loading screen just like this one https://www.jackdavison.co.uk I tried doing something with my loading page but it´s not looking like the page I want. is there a way anyone can help me check my codes and tell me how can I manage to create this exact transition thank you my page is doceenpunto.lat PSWD: ferferfer

Thanks and is there a new code I could use to make it exactly as this reference https://www.jackdavison.co.uk I want the smooth design in the letters to scroll up and also the background

Hello i want to make for this page a loading introduction JUST for my homepage. my inspiration is this https://www.jackdavison.co.uk I got this codes and i was wondering two things 1- is there a way i can ad my loading for it to scroll up when it eds 2- I want it to appear just on my loading screen introduction not for every page. ill share the codes here if you could help me i would really appreciate it CODE INJECTION HEADER <div class="loadingscreen"> <span class="loading"><span class="loader-inner"><img class="logo-pulse" src="https://static1.squarespace.com/static/664d36ff1a5c8a242694306d/t/668f123f1005243876af0f16/1720652351935/A+Celebrar+la+vida+a+celebrar+el+amor.png" alt="A Celebrar la vida, a celebrar el amor T"></span></span> </div> CODE FOOTER <script> document.body.classList.add("stop-scrolling"); window.onload = function() { document.body.classList.remove("stop-scrolling"); document.getElementById("header").style.visibility = "visible"; document.querySelectorAll(".loadingscreen").forEach(x => x.style.display = "none"); }; </script> CSS .stop-scrolling { height: 100%; overflow: hidden; } #header { visibility: hidden; } .loadingscreen { position: absolute; background: #000000; opacity: 1; z-index: 2000; width: 100%; } .loadingscreen > .loading { background: #000000; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: left; } .loading img { height: auto; width: 200px; } .logo-pulse{ animation-name: slideide; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } }

Hello, I recently bought a PLUG IN so that my product can have color and size variants. I think I uploaded it correctly but my swatches look terrible first of all they have bullets points for each of them and is not aesthetic, second even though I think my page has square buttons for format I need this to be in circle just like every other page. In simpler words I´ll upload the picture of what I want vs what im getting please help!!