Add an empty section
Make it full width and remove all the padding
Add en embed element and copy the following HTML code inside. Modify the ITEMS to your liking
<div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
<div class="ticker-item">ITEM HERE</div>
<div class="ticker-item">CAN DO A SECOND ITEM</div>
<div class="ticker-item">As MANY as YOU WANT</div>
</div></div></div>
Add the CSS code to the custom CSS option of the embed element (pro feature)
/* 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 */
}
/* 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: 50s;
}
.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-right: 35px;
font-family:montserrat;
text-transform:uppercase;
Font-weight:500;
letter-spacing:4px;
color:#fff;
font-size:15px;
}
/* THIS IS THE SEPERATOR - DELETE IF YOU WANT */
.ticker-item:after {
padding-left:35px;
content:"||";}
Thanks a lot to Anastasia Gande for the inspiration and the code ;-)
Then you just need to modify the colors of your section's Background
You can download the premade section and import it directly in your brizy builder by filling the form below.
Ticker Banner
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want
Thanks a lot for your help, It's greatly appreciated !!
And feel free to ask for tutorials or tips that you would like to discover on the site