AlwaysQuestioning AlwaysQuestioning - 5 months ago 57
Javascript Question

How can I use the "typing effect" CSS animation here in conjunction with Bootstrap's responsiveness?

There is a nice typing animation I would like to use on my personal website:
https://codepen.io/rusjames/pen/uAFhE


However, when I try to put it inside a

jumbotron
in bootstrap, I notice that it does not respond to the window resizing (e.g. making the window smaller makes it fall offscreen) that normal text would.

Is there a way I can have this text respond to the window size, and all the other nice properties of bootstrap?

EDIT: The CSS is exactly the same as the link about, except I changed it from applying to all
p
to a class called
typing
:

<div id="main" class="container-fluid text-center push-center">
<div style="background:transparent !important" class="jumbotron">
<h1>Welcome to my site</h1>
<p class="typing"> <i class="fa fa-globe" aria-hidden="true"></i>
I am from America </p>
<p class="typing"> <i class="fa fa-briefcase" aria-hidden="true"></i>
I love to work. </p>
<p class="typing">
Contact me! <span>|</span>
</p>
</div>

</div>

</div>

Answer

You can do this by specifying font-size in viewport units, as seen here:
Scaling font size with screen size?

This applies to all kinds of text.

Comments