Just wondering how to create this using animations? Or is it just easier/quicker to do this with code?
Thanks!
Hi @Jess_MacDonald, there are a couple ways to do this. You could create a Marquee effect using a large text block and having it move on scroll or on load.
If you want something more dynamic, for example stopping on hover or having it loop perfectly you could go the code route. I have put a rough example here that you can style!
<div class="marquee">
<div>
<span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 1.</a></span>
<span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 2.</a></span>
</div>
</div>
<style>
body {
margin: 20px;
}
.marquee {
position: relative;
overflow: hidden;
width: 100%;
height: 25px;
}
.marquee div {
position: absolute;
display: block;
overflow: hidden;
width: 200%;
height: 30px;
animation: marquee 10s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
</style>
2 Likes
Going for the loop version so this code is perfect. Thank you.
1 Like
Hi @HEADLESS.HORSE i’ve used your code on my site and its great, but on IOS its not showing the custom font.
Any idea where I am going wrong? Thanks in advance.
–
TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER.
TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER.
TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER.