How to start CSS mock marquee with full text from left?

[xnyjyh]

I have this simple code for a fake/mock Marquee. I want it to start with the bar full of repeating infinite text, not start to come into blank bar(on page load bar is full of repeating infinite text). How can this be done? Also, I would like it to start from the left instead of right. Thanks

Code:

<style>
.marquee {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 5s linear infinite;
-webkit-animation: scroll-left 5s linear infinite;
animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
</style>

<div class="marquee">
<p>Scrolling text... </p>
</div>

[Liquid_xPert_SJ]

@xnyjyh 

<style>
.mq-Marquee {
	flex-flow: row nowrap;
	display: flex;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	z-index: 10;
	position: relative;
	text-align: center;
	border-bottom: 1px solid transparent;
	padding: 2px;
}
.mq-Marquee_Items {
	flex-flow: row nowrap;
	display: flex;
	animation: Ticker 50s infinite linear;
	white-space: nowrap;
}
.mq-Marquee_Item {
	display: inline-block;
	white-space: nowrap;
	padding: 0 100px;
	text-align: center;
}
.hd-AnnouncementBar_Text {
	display: block;
	padding: 8px 22px;
	font-weight: 500;
	letter-spacing: .03px;
}
 @keyframes Ticker {
 100% {
 transform: translateX(-100%);
}
}
</style>
<marquee-element class="mq-Marquee" style="--Marquee_Gap:80px;--Marquee_Speed:35s; background-color:#000000;">
<div class="hd-AnnouncementBar_Items mq-Marquee_Items">
  <div class="hd-AnnouncementBar_Item mq-Marquee_Item">
    <p class="hd-AnnouncementBar_Text" style="color:#ffffff">AFTERPAY &amp; KLARNA AVAILABLE AT CHECKOUT!!</p>
  </div>
  <div class="hd-AnnouncementBar_Item mq-Marquee_Item">
    <p class="hd-AnnouncementBar_Text" style="color:#ffffff">35% OFF ENTIRE SITE!! Use Code: TEST !!</p>
  </div>
</div>
</marquee-element>

[xnyjyh]

Not quite. I starts good, but its not continuous. need it continuous. once it starts it needs to never reset on page load. your likes starts then resets.

[PageFly-Richard]

Hi @xnyjyh 

This is Richard from PageFly - Shopify Page Builder App

You can use this code as a marquee instead. You can paste it in the Custom Liquid 

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div id="node-marquee">
<span>@CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑  @CROWNJEWELED_ 👑   </span>
</div>
<script>
nodeMarquee({
    parent: '#node-marquee',
    speed: 1
});
</script>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[xnyjyh]

when i style it with css. the text goes wonky as seen in attached image. Also, how can I control direct? Thanks 🙂