april44 Posted April 1 Posted April 1 Dear CSS gurus! Quick question & hoping it's a simple change! Added this code to a new site I'm building (for myself). Even though I'm sure you can read the code: It creates a plain animation screen upon arriving at the site Logo circulates Plain animation screen then swipes off to the left Problem? It animates on About page, portfolio page.....any page I click on. Just want it once on site arrival Question? Which part of the code do I need to swap out so it only occurs Once upon site arrival? (like I've seen on another site) Is it "position: absolute;"? *Disclaimer: I did first ask the code designer, just not had a comment response back yet, but it is Easter Thank you in advance👍 /*CREATING AN ANIMATED LOADING SCREEN FOR SQUARESPACE (7.0 & 7.1)*/ //To style the whole screen container .loading-screen { animation: goodbyeScreen .5s forwards 3.5s cubic-bezier(.5,-.75,.7,2); background-color: #fafafa; height: 100%; position: fixed; left: 0; top: 0; width: 100%; z-index: 10000; } //To style the logo or image .loading-screen-image { animation: scrollingLogo 1 3s linear; background-image: url(https://images.squarespace-cdn.com/content/660769db104f6977dd11b072/3d770d38-6440-4b9a-b078-1e45aef1af9f/April_Walker_logo_circle_favicon+no+background.png?content-type=image%2Fpng); background-position: center; background-repeat: no-repeat; background-size: contain; height: 190px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 190px; } //Animation for the scrolling logo @keyframes scrollingLogo { to { transform: translate(-50%, -50%) rotate(360deg); } } //Animation for the sliding screen @keyframes goodbyeScreen { to { transform: translateX(-100%); } }
paul2009 Posted April 1 Posted April 1 (edited) To make it load once, you'll need to add some code to the HTML/JS that checks whether the site has loaded before, for example, by setting a localStorage value. The code can then check for this value before it runs, preventing it running more than once. I haven't seen your other code, but it would typically: Check for the localStorage value. If not found (because it is running for the first time), load the animation. Set a localStorage value to prevent it running next time. When the page has fully loaded, remove the animation. In addition, it's usually good practice to include a timer to remove the loading animation after a preset period, in case the page never fully loads (as the site wouldn't be visible). A second timer can help by setting a minimum time for the animation, in case the page loads so quickly that the animation flashes on and then disappears. Did this help? Please give feedback by clicking an icon below ⬇️ Edited May 24 by paul2009 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment