How do I make this rolling animation?

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!

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>