CODEWITHSUNDEEP
javascript
RandomUser
RandomUser

Reputation: 3

Making text appear over time with javascript

I am trying to create a simple web page when I ran into a problem that I might need everyone to help me solve. Say I was writing some text in font, and I want text to appear right under it under 10 seconds. Is this possible? I've tried Google already. It's results weren't so decent.

Upvotes: 0

Views: 1293

Answers (3)

le_m
le_m

Reputation: 20228

This can be achieved using CSS animations:

.more {
  animation: fadein 10s steps(1, end);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
<div>Some text</div>
<div class="more">Some more</div>

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49208

Kinda rough, but gets the point across if what you want is text to display directly under some other text. (However, looks like you simply wanted a paragraph line break using <br>.)

setTimeout(function(){
    var _text = document.getElementById('text-over'),
        under = document.createElement('span');

    under.className = 'text-under';
    under.textContent = 'Under';

    _text.append(under);
    
    console.log(_text, under);
}, 10000);
#text-over {
  position: relative;
  display: inline-block;
}
.text-under {
  position: absolute;
  bottom: -20px;
  left: 0;
}
<p>
  <span id='text-over'>Text</span> will go under there.
</p>

Upvotes: 0

Duncan Lukkenaer
Duncan Lukkenaer

Reputation: 13944

As your question was not very clear, I guess this might (or might not) be what you are looking for:

setTimeout(function() {
    document.getElementById('element').innerHTML += '<br>More text';
}, 10000);
<div id="element">Some text</div>

Upvotes: 1

Related Questions