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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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