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

Report · Apr 12, 2020

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 !

Report · Apr 12, 2020

You're telling people you are closed due to the pandemic. You do not need or want a gimmicky marquee effect. Don't complicate this. Keep it simple.

()__()
(='.'=)
(")_(")

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 12, 2020

Please help me fix this... I like the way the scroll effect lQQks.

I know you know how to fix this crazy thing 🙂

Report · Apr 13, 2020

Hi - sorry Nancy, I could not resist - I'll quote her answer in another thread:

"DO NOT use the outdated <marquee> tag.

--------- rest of text deleted ---------

Nancy O'Shea, ACP
Alt-Web.com"

Hans-Günter

http://hansgd.de

Report · Apr 13, 2020

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>

Adobe Community

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

1 Correct answer