Make a Text Cycle
![]()
See example︎
This customization will cycle a list of words, fixed to the center of the screen, with each word rendered as large as possible. To use, first add the following script to your Custom HTML: <script src="https://static.cargo.site/scripts/loader.js" data-name="cycle"></script>
Then paste this code into the CSS Editor:.cycle_content {
opacity: 0;
white-space: nowrap;
display: inline-block;
pointer-events: none;
}
.cycle_container {
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 1rem;
line-height: 1 !important;
}
Then edit the page where you want to add your cycling text, open Code View (via the Formatting Toolbar) and paste the following div:
<div on-time="400" off-time="0" size="90%" random="false" loop="true" class="cycle">COMPACT DISCS FOR EVERY ONE</div>
Each word will be displayed on its own; to display multiple words together, replace spaces with
on-time The length of time (in milliseconds) to display each word
off-time The length of time (in milliseconds) between displaying each word
size The size of the text / the percentage of the browser's width to occupy.
To make all text the same size, use a “rem” value (e.g. 4rem).
random Whether to randomize the words every cycle
loop Whether to display the cycle repeatedly.
.code-list span {
margin-bottom: .5em;
display: inline-block;
}
.code-list span code {display: inline-block;}
[local-style="8620131"] .content img {
float: none;
margin-bottom: 0em;
outline: 1px solid rgba(0, 0, 0, .08);
outline-offset: -1px;
margin-bottom: 0.3em;
}
[local-style="8620131"] .site_header {
height: 1.7rem;
border-top: 1px solid rgba(0, 0, 0, 0.10);
border-left: 1px solid rgba(0, 0, 0, 0.10);
border-right: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 0;
background: rgba(255, 255, 255, 1);
border-bottom: none;
z-index: -1;
vertical-align: top;
line-height: 0;
padding: 0.46rem 0.5rem;
}
[local-style="8620131"] .site_header > div {
display: block;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.12);
background-image: url(https://freight.cargo.site/t/original/i/914dd7ab352169cd7ad3da149c3453709a821e6575e2c7445d429238d6390e38/dots.gif);
background-size: contain;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 99999;
background-repeat: no-repeat;
background-position: .5rem 0;
}
See example︎
This customization will cycle a list of words, fixed to the center of the screen, with each word rendered as large as possible. To use, first add the following script to your Custom HTML: <script src="https://static.cargo.site/scripts/loader.js" data-name="cycle"></script>
Then paste this code into the CSS Editor:.cycle_content {
opacity: 0;
white-space: nowrap;
display: inline-block;
pointer-events: none;
}
.cycle_container {
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 1rem;
line-height: 1 !important;
}
Then edit the page where you want to add your cycling text, open Code View (via the Formatting Toolbar) and paste the following div:
<div on-time="400" off-time="0" size="90%" random="false" loop="true" class="cycle">COMPACT DISCS FOR EVERY ONE</div>
Each word will be displayed on its own; to display multiple words together, replace spaces with
on-time The length of time (in milliseconds) to display each word
off-time The length of time (in milliseconds) between displaying each word
size The size of the text / the percentage of the browser's width to occupy.
To make all text the same size, use a “rem” value (e.g. 4rem).
random Whether to randomize the words every cycle
loop Whether to display the cycle repeatedly.
.code-list span {
margin-bottom: .5em;
display: inline-block;
}
.code-list span code {display: inline-block;}
[local-style="8620131"] .content img {
float: none;
margin-bottom: 0em;
outline: 1px solid rgba(0, 0, 0, .08);
outline-offset: -1px;
margin-bottom: 0.3em;
}
[local-style="8620131"] .site_header {
height: 1.7rem;
border-top: 1px solid rgba(0, 0, 0, 0.10);
border-left: 1px solid rgba(0, 0, 0, 0.10);
border-right: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 0;
background: rgba(255, 255, 255, 1);
border-bottom: none;
z-index: -1;
vertical-align: top;
line-height: 0;
padding: 0.46rem 0.5rem;
}
[local-style="8620131"] .site_header > div {
display: block;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.12);
background-image: url(https://freight.cargo.site/t/original/i/914dd7ab352169cd7ad3da149c3453709a821e6575e2c7445d429238d6390e38/dots.gif);
background-size: contain;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 99999;
background-repeat: no-repeat;
background-position: .5rem 0;
}