Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
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
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" ..
Never mind I fixed it by myself
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024