Solved

Marquee text (narrative theme) on mobile

Fares2
Excursionist
60 0 11

Hello, recently i added a marquee text on my narrative  theme, it didn’t come out smooth on mobile like this theme’s marquee text, it was lagging

 

the theme that I’m referring to

(https://streamline-theme-core.myshopify.com

 

my website: https://oxytocin-sa.myshopify.com

Accepted Solution (1)

DipenPanchal
Shopify Partner
252 59 80

This is an accepted solution.

Hello @Fares2 ,

Greetings!!

 

Please replace this code with your code https://prnt.sc/556fal0EKeO0


<div class="marqueeText">
<span>"555" "NEW BEGINNING" IS OUT NOW! </span>
</div>
<style>
.marqueeText {
height: 50px;
overflow: hidden;
position: relative;
width: 100%;
}
.marqueeText span{
font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #Dadaa8;
text-align: center;
font-size: 2em;
color: limegreen;
position: absolute;
width: 85%;
height: 100%;
margin: 0;
line-height: 50px;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: marqueeText 15s linear infinite;
-webkit-animation: marqueeText 15s linear infinite;
animation: marqueeText 15s linear infinite;
}
.marqueeText span a{
margin-right:50px;
}
/* Move it (define the animation) */
@-moz-keyframes marqueeText {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marqueeText {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes marqueeText {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>

Output : https://nimb.ws/lbDvn0
 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

Replies 3 (3)

DipenPanchal
Shopify Partner
252 59 80

This is an accepted solution.

Hello @Fares2 ,

Greetings!!

 

Please replace this code with your code https://prnt.sc/556fal0EKeO0


<div class="marqueeText">
<span>"555" "NEW BEGINNING" IS OUT NOW! </span>
</div>
<style>
.marqueeText {
height: 50px;
overflow: hidden;
position: relative;
width: 100%;
}
.marqueeText span{
font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #Dadaa8;
text-align: center;
font-size: 2em;
color: limegreen;
position: absolute;
width: 85%;
height: 100%;
margin: 0;
line-height: 50px;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: marqueeText 15s linear infinite;
-webkit-animation: marqueeText 15s linear infinite;
animation: marqueeText 15s linear infinite;
}
.marqueeText span a{
margin-right:50px;
}
/* Move it (define the animation) */
@-moz-keyframes marqueeText {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marqueeText {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes marqueeText {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>

Output : https://nimb.ws/lbDvn0
 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
Fares2
Excursionist
60 0 11

Worked perfectly ! But unfortunately it's not showing the whole text.. The whole text is "555" "NEW BEGINNING"  is out now!

 

What it's showing only "555" "NEW BEGINNING" ..

Fares2
Excursionist
60 0 11

Never mind I fixed it by myself