marquee effect - text delay and cut-off on apple devices.

Forum|Forum|5 years ago
April 12, 2020
2 replies
2175 views

Hello great community 🙂

I have been trying to figgure out how to insert a marquee effect, the issue I'm having is that my text has a delay on apple devices.. When I remove the position:absolute or width: auto - it fixes the delay, but then it cuts off the end of my text..

here is a link to the issue.

https://laveautovaudreuil.com/Car_wash.html

Thank you so much for your support !

Code

This topic has been closed for replies.

Correct answer osgood_

Try the below alternative:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Scroller</title>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
.scroller {
display: flex;
align-items: center;
position: relative;
width: 45%;
margin: 0 auto;
background-color: #990000;
height: 2.4em;
overflow: hidden;
border-radius: 4px;
}
.scrollerText {
position: absolute;
font-family: 'Courier Prime', monospace;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
margin-left: 100%;
padding: 5px 0 5px 0;
}
.scrollerAnimate {
transition: margin 15s linear;
}
</style>
</head>
<body>

<div class="scroller">
<div class="scrollerText">
Due to covid-19 we are closed till May 04 - thankyou for your understanding.
</div>
</div>

function scroller() {
setTimeout(function(){
scrollerText.style.marginLeft = '-' + scrollerTextWidth + 'px';
scrollerText.classList.add('scrollerAnimate');
}, 200);
}

setInterval(function(){
scrollerText.style.marginLeft = '100%';
scrollerText.classList.remove('scrollerAnimate');
scroller();
}, 15500);

scroller();
</script>

</body>
</html>

O

osgood_Correct answer

Legend

Try the below alternative:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal Scroller</title>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
.scroller {
display: flex;
align-items: center;
position: relative;
width: 45%;
margin: 0 auto;
background-color: #990000;
height: 2.4em;
overflow: hidden;
border-radius: 4px;
}
.scrollerText {
position: absolute;
font-family: 'Courier Prime', monospace;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
margin-left: 100%;
padding: 5px 0 5px 0;
}
.scrollerAnimate {
transition: margin 15s linear;
}
</style>
</head>
<body>

<div class="scroller">
<div class="scrollerText">
Due to covid-19 we are closed till May 04 - thankyou for your understanding.
</div>
</div>

function scroller() {
setTimeout(function(){
scrollerText.style.marginLeft = '-' + scrollerTextWidth + 'px';
scrollerText.classList.add('scrollerAnimate');
}, 200);
}

setInterval(function(){
scrollerText.style.marginLeft = '100%';
scrollerText.classList.remove('scrollerAnimate');
scroller();
}, 15500);

scroller();
</script>

</body>
</html>