Highlighted

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

Explorer ,
Apr 12, 2020

Copy link to clipboard

Copied

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 !

 

TOPICS
Code

Views

781

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 12, 2020

Copy link to clipboard

Copied

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 !

 

TOPICS
Code

Views

782

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 12, 2020 0
Adobe Community Professional ,
Apr 12, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2020 0
Explorer ,
Apr 12, 2020

Copy link to clipboard

Copied

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

 

I know you know how to fix this crazy thing 🙂 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2020 0
Adobe Community Professional ,
Apr 13, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2020 0
osgood_ LATEST
LEGEND ,
Apr 13, 2020

Copy link to clipboard

Copied

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>
<!-- end scroller -->

<script>
const scrollerText = document.querySelector('.scrollerText');
const scrollerTextWidth = scrollerText.offsetWidth;


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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2020 1