Marquee Scrolling Text Announcement Bar

Site URL: https://www.milkglobal.net

Morning/Evening guys,

Has anyone managed to achieve a scrolling announcement bar that works on all devices.

I've tried quite a few open source codes but nothing achieves a smooth transition from right to left.

If anyone has any advice it would be hugely appreciated.

Thanks
Dan

1 hour ago, Triick said:

Site URL: https://www.milkglobal.net

Morning/Evening guys,

Has anyone managed to achieve a scrolling announcement bar that works on all devices.

I've tried quite a few open source codes but nothing achieves a smooth transition from right to left.

If anyone has any advice it would be hugely appreciated.

Thanks
Dan

Add this to Design->Custom CSS

.sqs-announcement-bar-text {
  	overflow: hidden;
}
#announcement-bar-text-inner-id {
  	display:block;
	position:relative;
	width:100vw;
	animation:scroll 10s linear infinite;
	padding:3px;
}
@keyframes scroll {
	0% {left:800px;}
	100% {left:-800px;}
}

2 hours ago, bangank36 said:

Add this to Design->Custom CSS

.sqs-announcement-bar-text {
  	overflow: hidden;
}
#announcement-bar-text-inner-id {
  	display:block;
	position:relative;
	width:100vw;
	animation:scroll 10s linear infinite;
	padding:3px;
}
@keyframes scroll {
	0% {left:800px;}
	100% {left:-800px;}
}

 

Is there a way to make it flawless, at the moment it finishes before the edge of the screen, Also can it start again before it reaches the left hand side?

Thanks

Site URL: https://www.milkglobal.net

Hi guys,

Me again......Im not sure the marquee option is right for what I need so has anyone ever been able to animate the text in the announcement in a rolling style so I could have multiple Discount Codes that show after every 3 seconds etc?

I was trying marquee scroll but its not having the effect I desire.

Thanks

Dan

On 12/20/2020 at 7:23 AM, bangank36 said:

Add this to Design->Custom CSS

.sqs-announcement-bar-text {
  	overflow: hidden;
}
#announcement-bar-text-inner-id {
  	display:block;
	position:relative;
	width:100vw;
	animation:scroll 10s linear infinite;
	padding:3px;
}
@keyframes scroll {
	0% {left:800px;}
	100% {left:-800px;}
}

 

I used this and it worked seamlessly, but how do we get the text to repeat to where we eliminate that awkward blank space and pause in the scrolling animation?

14 hours ago, BLSTUDIO said:

I used this and it worked seamlessly, but how do we get the text to repeat to where we eliminate that awkward blank space and pause in the scrolling animation?

Can you share your link?

On 2/19/2022 at 8:03 PM, bangank36 said:

Can you share your link?

www.bylaurendi.studio

password: hello

Have you tried adding more text on announcement to make it longer than current state?