Jump to content

How do I make this rolling animation?

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.code-shop.co/

Hey!

I stumbled upon this website (the url is not my website). If you scroll down to the very bottom, right before newsletter sign up is a cool rolling animation with the companys social media accounts linked in it. I really like this and would like something similar on my own site, but how do I make one? I tried understanding the css but could not wrap my head around it since I have not used css for too long.

Any help is appreciated!

Thanks!

Link to comment
  • Solution
On 6/25/2021 at 1:54 AM, ConeCake said:

Site URL: https://www.code-shop.co/

Hey!

I stumbled upon this website (the url is not my website). If you scroll down to the very bottom, right before newsletter sign up is a cool rolling animation with the companys social media accounts linked in it. I really like this and would like something similar on my own site, but how do I make one? I tried understanding the css but could not wrap my head around it since I have not used css for too long.

Any help is appreciated!

Thanks!

Add this into code block

<div class="marquee">
  <div class="track">
    <div class="content"><h3 style="color: #fff; text-decoration:none;"><a href="https://www.instagram.com/letstalkcodeshop" target="_blank">Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop | Follow on Instagram @letstalkcodeshop</a></h3></div>
  </div>
</div>

<style>

.marquee {
  position: relative;
  width: 110vw;
  max-width: 100%;
  height: 25px;
  padding-top: 20px;
  padding-bottom:20px;
  overflow-x: hidden;
  background: #000;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 32s linear infinite;
}
.marquee h3 a:hover {
  color: #fff;
  }
  
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
</style>

 

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.