thesd5x Posted March 14, 2022 Share Posted March 14, 2022 Site URL: https://www.thehabituallyelevated.com/clipx This is my second attempt at trying to implementing this piece of code. I'm wanting to apply this to one specific page (link provided). So far, I've ran into one of these two issues: 1) being unable to scroll with the custom code added (assuming that this is due to the viewport) 2) the custom css is limited to one block on a specific page. I have attached the code from my CodePen to this thread as a reference. The concept I'm going for is the old PlayStation 2 startup screen if you're familiar. HTML: — <body> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> </body> CSS — * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-color: #000; overflow: hidden; } .glowing { position: relative; min-width: 750px; height: 750px; margin: 150px; transform-origin: right; animation: colorChange 5s linear infinite; } .glowing:nth-child(even) { transform-origin: left; } @keyframes colorChange { 0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 100% { filter: hue-rotate(360deg); transform: rotate(360deg); } } .glowing span { position: absolute; top: calc(80px * var(--i)); left: calc(80px * var(--i)); bottom: calc(80px * var(--i)); right: calc(80px * var(--i)); } .glowing span:before { content: ""; position: absolute; top: 50%; left: -8px; width: 15px; height: 15px; background: #f00; border-radius: 50%; } .glowing span:nth-child(3n + 1):before { background: rgba(134, 255, 0, 1); box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1), 0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1); } .glowing span:nth-child(3n + 2):before { background: rgba(225, 214, 0, 1); box-shadow: 0 0 20px rgba(225, 214, 0, 1), 0 0 40px rgba(225, 214, 0, 1), 0 0 60px rgba(225, 214, 0, 1), 0 0 80px rgba(225, 214, 0, 1), 0 0 0 8px rgba(225, 214, 0, 0.1); } .glowing span:nth-child(3n + 3):before { background: rgba(0, 226, 255, 1); box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1), 0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1); } .glowing span:nth-child(3n + 1) { animation: animate 10s alternate infinite; } .glowing span:nth-child(3n + 2) { animation: animate-reverse 3s alternate infinite; } .glowing span:nth-child(3n + 3) { animation: animate-reverse 8s alternate infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } Any help would be appreciated! Thanks in advance! Link to comment
IXStudio Posted March 14, 2022 Share Posted March 14, 2022 (edited) Hi, Could you add the code in the Header Injection of a new page? Make a duplicate from your current page.Settings of each page -> Advance -> Header Injection Best, Leopold Edited March 14, 2022 by IXStudio Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
tuanphan Posted March 14, 2022 Share Posted March 14, 2022 Remove this CSS code * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-color: #000; overflow: hidden; } IXStudio 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment