Cloud-Based Signage Blog

Scrolling text effect with Signagecloud

,
Scrolling text effect with Signagecloud

Signagecloud can do a lot, but not everything yet. One of the tools that we have not implemented in our cloud service is, for example, a scrolling text button. We are working on it and the button will be available in the cloud-dashboard, but until it is ready, you can easily integrate it.

Perform the following steps:

  1. Go to the Signage Dashboard
  2. Create a new playlist or select an existing one
  3. Now we go to the HTML Tool </> and insert the following code:


<style style="text/css">
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
color: crimson;
font-size: 200%;
font-family: courier;
position: absolute;
width: 160%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: example1 15s linear infinite;
-webkit-animation: example1 15s linear infinite;
animation: example1 50s linear infinite;
}
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
</style>

<div class="example1">
<h3>Hello Signagecloud!</h3>
</div>

With this simple HTML and CSS style, a scrolling text effect can be easily integrated via the HTML input field!
And so it looks on the screen (please wait a moment):

Hello Signagecloud!

With small CSS adjustments, you can easily customize the code to suit your needs.

Overview:


FREE TRIAL DIGITAL SIGNAGE CLOUD-BASED SOLUTION

Related Digital Signage Posts:



Share "Scrolling text effect with Signagecloud" on social media channels: