Jump to content

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

By scholarsayze, in Customize with code

Go to solution Solved by Beyondspace,

Recommended Posts

scholarsayze Level 7

scholarsayze

Posted
Posted

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
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

scholarsayze
scholarsayze

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 sectio

Beyondspace
Beyondspace

What is your site password

scholarsayze
scholarsayze

I apologise, the Pword = bluebird Thank you

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
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
Beyondspace Level 14

Beyondspace

Posted
  • Solution
Posted
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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources