Required help in auto scrolling functionality like announcment banner

usmekhan91
Shopify Partner
34 0 7

Hi Developer Community,

I required help for auto scrolling functionality in my div. Currently I had tested several functions but non of them had worked (might be due to coding error). Can any one please help me in this regards?

usmekhan91_0-1702291960705.png

 

Code that i had used.

#scroll-container {
  border: 3px solid black;
  border-radius: 5px;
  overflow: hidden;
}

#scroll-text {
  text-align: right;

  /* animation properties */
  -moz-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  
  -moz-animation: my-animation 15s linear infinite;
  -webkit-animation: my-animation 15s linear infinite;
  animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(-100%); }
  to { -moz-transform: translateX(100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(-100%); }
  to { -webkit-transform: translateX(100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}

 

Preview link: https://qnkqyb8fha6egqaw-61554688170.shopifypreview.com

Theme: Kalles v4.2.2 

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 461 515

Hi @usmekhan91 ,

Try adding the following code to the base.css file:

@keyframes scrollAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.t4s-container {

animation: scrollAnimation 10s linear infinite;

}

Hope it works @usmekhan91 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

usmekhan91
Shopify Partner
34 0 7

It is disturbing whole page UI/UX by scrolling entire page

BSS-Commerce
Shopify Expert
3477 461 515

I have checked that your site has many HTML elements that use the class "t4s-container", so the above code affects all of those elements.
=> Solution: add 1 id="id" to this section https://www.awesomescreenshot.com/image/44819848?key=9c78b2e05ff15780accf96241732231b and replace ".t4s-container" in the code with the #id just added

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development