scholarsayze Posted December 22, 2020 Share Posted December 22, 2020 Site URL: https://bluebird-porcupine-yzdg.squarespace.com/ Hello, I was wondering if it is possible to create a scrolling banner/marquee effect on one of my sections? I have a thin green section on my homepage that I want to use for messaging like 'shipping' or marketing etc. How can I make the content scroll in such a way and cycle through repeatedly? Please help. Many thanks, Best, Faiz Beyondspace 1 Link to comment
Beyondspace Posted December 22, 2020 Share Posted December 22, 2020 6 minutes ago, scholarsayze said: Site URL: https://bluebird-porcupine-yzdg.squarespace.com/ Hello, I was wondering if it is possible to create a scrolling banner/marquee effect on one of my sections? I have a thin green section on my homepage that I want to use for messaging like 'shipping' or marketing etc. How can I make the content scroll in such a way and cycle through repeatedly? Please help. Many thanks, Best, Faiz What is your site password scholarsayze 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
scholarsayze Posted December 22, 2020 Author Share Posted December 22, 2020 I apologise, the Pword = bluebird Thank you Beyondspace 1 Link to comment
Solution Beyondspace Posted December 22, 2020 Solution Share Posted December 22, 2020 20 minutes ago, scholarsayze said: I apologise, the Pword = bluebird Thank you Try this section[data-section-id="5f8fea6196d2c93c2a238f89"] .content-wrapper { position: relative; overflow: hidden; --offset: 20vw; --move-initial: calc(100%); --move-final: calc(-10%); } section[data-section-id="5f8fea6196d2c93c2a238f89"] .content { width: fit-content; display: flex; position: relative; transform: translate3d(var(--move-initial), 0, 0); animation: marquee 20s linear infinite; animation-play-state: running; } section[data-section-id="5f8fea6196d2c93c2a238f89"] .sqs-block-html { margin: 0 !important; padding: 0 !important; } @keyframes marquee { 0% { transform: translate3d(var(--move-initial), 0, 0); } 100% { transform: translate3d(var(--move-final), 0, 0); } } play this value to change speed BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
scholarsayze Posted December 22, 2020 Author Share Posted December 22, 2020 WOW! Bangank36 That's SO cooool! Awesome just what I need thank you so much! 💯💗 Beyondspace 1 Link to comment
scholarsayze Posted December 22, 2020 Author Share Posted December 22, 2020 I have now added the code and tweaked the text a little by pasting the same text a few times. Is it possible to adjust the animation so it keeps the text running with no break/stop so it just flows constantly? Also with multiple text it now looks odd on mobile see attached. Many thanks! 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