How to shift a word into a sentence in HTML
Is it possible using css or Javascript to silde a word in a sentence? I have it at the bottom, for sliding text. When the second sentence is displayed, the word "Data" will then be replaced by "Process", then "Technology", then "Formula". Until all words have been shown, the next sentence should not be displayed.
Tried using setInterval
, get display text from div
using innerText
and write conditions to remove / re-add class. But innerText
always gives all the text inside the div.
HTML:
<div class="tag-slider">
<div class="marquee down" id="marquee-down-text">
<p>Manage collaborative process</p>
<p>Three level security to protect your Data</p>
</div>
</div>
CSS
.marquee.down p {
transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
animation: down-one 10s ease infinite;
-moz-animation: down-one 10s ease infinite;
-webkit-animation: down-one 10s ease infinite;
}
.marquee.down p:nth-child(2) {
animation: down-two 10s ease infinite;
-moz-animation: down-two 10s ease infinite;
-webkit-animation: down-two 10s ease infinite;
}
source to share
You can achieve this with CSS animations:
.sliding-words-wrapper {
vertical-align: top;
display: inline-block;
overflow: hidden;
/* set height to fit one item */
height: 18.4px;
}
.sliding-words {
display: inline-flex;
flex-direction: column;
position: relative;
top: 0;
animation: slide-words 10s linear infinite;
}
@keyframes slide-words {
from {
top: 0;
}
to {
/* (Word count - 1) * 100% */
top: -300%;
}
}
<div class="tag-slider">
<div class="marquee down" id="marquee-down-text">
<p>Manage collaborative process</p>
<div>Three level security to protect your
<div class="sliding-words-wrapper">
<div class="sliding-words">
<span>Data</span>
<span>Process</span>
<span>Technology</span>
<span>Formula</span>
</div>
</div>
</div>
</div>
</div>
If you need to show this animation after some event (for example, showing text), you can set its state to pause (via a CSS property animation-play-state: paused
), and then after some event to animation-play-state: running
via JavaScript.
source to share