Jump to content

Can I make a Scrolling Marquee effect on one of my sections?

Go to solution Solved by Beyondspace,

Recommended Posts

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

Link to comment
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

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
  • Solution
20 minutes ago, scholarsayze said:

I apologise, the Pword = bluebird

Thank you

image.thumb.png.352b44e1b8c7a90806573f69a92d5632.png

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

image.png.788a3c79857c71b259b3bd0892901a58.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.