Simple and Easy to Manage Horizontal News Ticker with CSS only

[⚡JFarrow⌁]

Way back in 2018, I shared this with you.  

Tip: How to Add an Easy to Manage News Ticker

Today, I'm going to share an entirely different version which is even easier to manage.  This one is great for community announcements.

See the Pen Pure CSS Ticker (Horizontal) by JFarrow (@JFarrow) on CodePen.

 

To install it, all you need to add to your site is the following CSS which goes inside your Design Studio custom CSS

@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
height: 4rem;
background-color: rgba(0, 0, 0, 0.9);
padding-left: 100%;
}

.ticker {
display: inline-block;
height: 4rem;
line-height: 4rem;
white-space: nowrap;
padding-right: 100%;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}

body {
padding-bottom: 5rem;
}

HTML CODE - change out the item text with your own news and place this inside an HTML module or inside the Below Header HTML

<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">JFarrow can fix my Ning</div>
<div class="ticker__item">Im sending you subliminal messages</div>
<div class="ticker__item">Velcro is a ripoff</div>
<div class="ticker__item">French people give me the crepes.</div>
<!--<div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
<div class="ticker__item">Letterpress chambray brunch.</div>
<div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
<div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
<div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
<div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>-->
</div>
</div>

[J.Ayvar]

thankss!!

[Alex - Rosas † Negras]

but you're not the usual person;) :) :)

[⚡JFarrow⌁]

very welcome!

[Bizz]

Nice JF, might have to have a little play around with this.