Matthew26 Posted October 19, 2023 Share Posted October 19, 2023 Hi! I have added an announcement bar via my site header. I did this because I wasn't too sure how to adjust the Squarespace announcement to my liking. Anyhoo- You will see that the text scrolls, however it always needs to reset. I would instead like for the text to continuously loop like the marquee banners. Therefore there will always be text showing. Can someone with more advanced code knowledge help me achieve this? Below is the code I've used. <!--Announcement Bar--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Announcement Bar Example</title> </head> <body> <div class="announcement-bar"> <div class="static-text"> <div class="dot"></div> Now Designing </div> <div class="scrolling-text-container"> <div class="scrolling-text"> A Multi-Lingual Tutoring-Service Website </div> <div class="scrolling-text"> Aspire Tutoring </div> <div class="scrolling-text"> A Modern Home-Remodeling Website Redesign </div> <div class="scrolling-text"> Elite Residential Source LLC </div> <div class="scrolling-text"> An Elegant Logo-Kit for a Fine Dining Experience </div> <div class="scrolling-text"> Down to Earth Fine Dining </div> <div class="scrolling-text"> An Integrated Membership Platform Revamp </div> <div class="scrolling-text"> AQR Futbol Training </div> </div> </div> </div> </body> </html> <!-- The CSS for the Announcement Bar --> // Announcement Bar Font // .announcement-bar { font-family: 'ProductSans-Regular', sans-serif; } .static-text{ font-family: 'ProductSans-regular', sans-serif; } .scrolling-text { font-family: 'ProductSans-thin', sans-serif; } // Announcement Bar Text Colors // .announcement-bar .scrolling-text-container .scrolling-text:nth-child(odd) { color: #d9d9d9; } .announcement-bar .scrolling-text-container .scrolling-text:nth-child(even) { color: #a6a6a6; } // Spacing Between Announcement Bar Items// .scrolling-text:nth-child(1) { margin-right: 10px; } .scrolling-text:nth-child(3) { margin-right: 10px; } .scrolling-text:nth-child(5) { margin-right: 10px; } .scrolling-text:nth-child(7) { margin-right: 10px; } // Scrolling Announcement Bar // @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .announcement-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; overflow: hidden; background: linear-gradient(-45deg, #1b0a24, #490793); background-size: 200% 200%; animation: gradientAnimation 10s infinite alternate; } .static-text { color: white; display: flex; align-items: center; font-weight: bold; white-space: nowrap; padding-right: 10px; padding-top: 7px; padding-left: 10px; padding-bottom: 7px; position: relative; z-index: 2; background-color: #370a66; border-radius: 5px; } .dot { width: 8px; height: 8px; background-color: red; border-radius: 50%; margin-right: 5px; } .scrolling-text-container { display: flex; white-space: nowrap; animation: scroll 80s linear infinite; } .scrolling-text { white-space: nowrap; margin-right: 50px; z-index: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } } Link to comment
JayVanDyke Posted October 19, 2023 Share Posted October 19, 2023 maybe check this out? https://www.adlyticmarketing.com/blog/squarespace-scrolling-marquee-announcement-bar Also you could add a marquee to a footer section or something and we can move it to the announcement bar with some javascript. That might be an easier solution so you don't have to edit all that code. If you do that just share your link here and one of us can probably help write it for you. Matthew26 1 ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
Matthew26 Posted October 19, 2023 Author Share Posted October 19, 2023 8 hours ago, jaeveedee said: maybe check this out? https://www.adlyticmarketing.com/blog/squarespace-scrolling-marquee-announcement-bar Also you could add a marquee to a footer section or something and we can move it to the announcement bar with some javascript. That might be an easier solution so you don't have to edit all that code. If you do that just share your link here and one of us can probably help write it for you. Thanks for the info! I tried using the native announcement bar option based on that resource you shared. Ive created something similar to what I was going for. However I still need help with a few things. 1) I would like the text to continuously generate like that in a marquee block, so there is never empty space. How can I do this? 2) I would like for the announcement bar to only appear on the home page and not show on any other page. How can I restrict it to the home url only, avoiding sub pages? Link to comment
JayVanDyke Posted October 20, 2023 Share Posted October 20, 2023 @Matthew26 I think I'd need to see your page. Can you share a link to where you have this setup? ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
Matthew26 Posted October 23, 2023 Author Share Posted October 23, 2023 On 10/20/2023 at 7:44 PM, jaeveedee said: @Matthew26 I think I'd need to see your page. Can you share a link to where you have this setup? Hey @jaeveedee No worries. Here is my page: www.designbymatt.co -let me know if you spot it at the top. Link to comment
JayVanDyke Posted October 24, 2023 Share Posted October 24, 2023 Hey @Matthew26 I'd honestly say this is something you want to do with the marquee block and some javascript. I've got a SUPER rough version here on a demo site to see if it's doable but not exactly how I would implement it on a client site. Happy to chat about building you a custom solution if you want to DM me https://oval-cyan-eg7s.squarespace.com/home pw: demo ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs Link to comment
Matthew26 Posted October 25, 2023 Author Share Posted October 25, 2023 Hey @jaeveedee I really like what you've built in the demo. How did you manage to get the marquee up there? That would honestly be ideal with me. Let me know, and thanks for your help. Link to comment
JayVanDyke Posted October 25, 2023 Share Posted October 25, 2023 So basically I just made a section and added a marquee. Then with some javascript I moved it up to the banner section and added some basic CSS. There is much more css to add to fix things with screen sizes and most likely issues with overlapping the top banner and ideally it would be coded so that in edit mode the block is still in its section so you can make changes and I'd probably do it in the footer instead so that it can show on every page. This was just a quick and dirty version. I'll DM you with some ideas. ☕ Did I help you? Buy me a coffee! 👨💻 Bergen Design Co. 💻 I'm for hire on Upwork! 🕸️ Squarespace Experts 🖥️ 99Designs 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