Scrolling Text

HTML & CSS
1

Hello, I want to add some scrolling Text so that it will scroll from Left To Right for where on the website it says Get in touch with us Could anyone tell me the code please.
Here is the website https://www.plantation-shutters-logan.com.au

2

Do you mean like a scrolling ticker message?

Or do you have specific requirements.

Generally we try to help you build the code for yourself :slight_smile:

5 Likes
3

Indeed that would be the way to go, here is another ticker snippet that is simple to work with and only uses HTML/CSS.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Ticker</title>
<style>
/* OUTER CONTAINER */
.tcontainer {
    width: 100%;
    overflow: hidden; /* Hide scroll bar */
}
/* MIDDLE CONTAINER */
.ticker-wrap {
    width: 100%;
    padding-left: 100%; /* Push contents to right side of screen */
    background-color: #eee;
}

/* INNER CONTAINER */
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-move {
    /* Basically move items from right side of screen to left in infinite loop */
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 20s;
}
.ticker-move:hover {
    animation-play-state: paused; /* Pause scroll on mouse hover */
}
/* ITEMS */
.ticker-item {
    display: inline-block; /* Lay items in a horizontal line */
    padding: 0 2rem;
}
</style>
</head>

<body>
<div class="tcontainer">
  <div class="ticker-wrap">
    <div class="ticker-move">
      <div class="ticker-item">Get In Touch.</div>
    </div>
  </div>
</div>
</body>
</html>
3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.