Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I make this rolling animation?


ConeCake

Question

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

1 answer to this question

Recommended Posts

  • 1
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>

 

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
If 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

Create an account or sign in to comment

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

×
×
  • Create New...