FluffCreativeStudio Posted June 4 Share Posted June 4 Hey there, I would love to add a small custom icon to a scrolling block. There are some scrolling widgets with image capabilities (will Myers and Elsfsight) but those are really for whole carousels of images. I really love the look of the Squarespace scroll with words - and just want to inject a tiny favicon instead of an emoji. Any coding geniuses out there have a suggestion for how to make this possible? Thank you! @tuanphan thought you might have an idea? Link to comment
tuanphan Posted June 5 Share Posted June 5 I just helped a case this morning, use Squarespace Scrolling Block If you share link to page where you use Scrolling Block + provide icon url, I will check & adjust code for your site. FluffCreativeStudio 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
FluffCreativeStudio Posted June 5 Author Share Posted June 5 (edited) Thank you so much @tuanphan I knew you would have the wisdom, that is exactly what I am trying to acomplish! The website is https://legally-fun.squarespace.com password is "fun" And here is a link to the image: https://ibb.co/3W2tWW6 Scrolling block is in the footer Edited June 5 by FluffCreativeStudio Link to comment
Solution tuanphan Posted June 6 Solution Share Posted June 6 21 hours ago, FluffCreativeStudio said: Thank you so much @tuanphan I knew you would have the wisdom, that is exactly what I am trying to acomplish! The website is https://legally-fun.squarespace.com password is "fun" And here is a link to the image: https://ibb.co/3W2tWW6 Scrolling block is in the footer #1. First, add text to Scrolling Block (you can add any text, because we will use text to change this text then). #2. Use this code to Page Header Code Injection (Page where you use Scrolling Block) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <style> .m-scroll { display: flex; position: relative; width: 100%; height: 90px; margin: auto; overflow: hidden; z-index: 1; } .m-scroll__title { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: flex-start; width: 100%; height: 100%; white-space: nowrap; transition: all 0.7s ease; } .m-scroll__title > div { display: flex; animation: scrollText 40s infinite linear; } .m-scroll__title img { margin: 0 20px 6px; } .m-scroll__title h1 { margin: 0; font-size: 1.7rem; color: #000; transition: all 1.4s ease; display: flex; } /*div:hover { animation-play-state: paused; }*/ @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } </style> <script> const words = ['WORK HARD PLAY HARD', 'WORK HARD PLAY HARD'] const imgUrl = 'https://i.ibb.co/TR6zRRj/Untitled-200-x-200-px.png'; $(document).ready(() => { const textBlock = $('.sqs-block.marquee-block.sqs-block-marquee'); const htmlWords = ` <div class="m-scroll"> <div class="m-scroll__title"> <div> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')} </h1> <h1> ${words.map((w) => `${w}<img width="20px" src="${imgUrl}"/>`).join('')} </h1> </div> </div> </div> `; $(htmlWords).insertAfter(textBlock); $(textBlock).remove(); }) </script> #3. Result #4. Explain a bit Add text/image in this position. If you use 1 text only, you should repeat twice (same as code in screenshot). if you use 3 different text, enter something like this this is Text color to increase Image width, you can add this code before </style> .m-scroll__title img { width: 50px; } to align text/image after you added image size code, use this code before </style> .m-scroll__title h1 { align-items: center; } FluffCreativeStudio 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
FluffCreativeStudio Posted June 6 Author Share Posted June 6 @tuanphan you are a genius! Thanks so much for explaining your code. I was able to make a few adjustments and it is looking good except for one issue. It seems there is lag time before the infinite loop kicks in - so that the scroll has an empty tail for about half the page before it begins again. Do you have a suggestion for this? Thank you again! Link to comment
tuanphan Posted June 7 Share Posted June 7 15 hours ago, FluffCreativeStudio said: @tuanphan you are a genius! Thanks so much for explaining your code. I was able to make a few adjustments and it is looking good except for one issue. It seems there is lag time before the infinite loop kicks in - so that the scroll has an empty tail for about half the page before it begins again. Do you have a suggestion for this? Thank you again! You mean this space? it appears about 1 second then disappear 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