Font size effect javascript
Question
I want to text effect like text increase size and decrease size loop with no limit using JavaScript
JavaScript:
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "10px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
HTML:
<p onload="fontSizer" id="font">Test</p>
4 answers
solution1
0 2016-09-25 17:02:54
The text effect can be achieved by using onload event with <body onload="fontSizer()> tag.
function fontSizer() { if (!document.getElementById("font").style.fontSize) { document.getElementById("font").style.fontSize = "15px"; } if (document.getElementById("font").style.fontSize == "15px") { document.getElementById("font").style.fontSize = "30px"; } else { document.getElementById("font").style.fontSize = "15px" } }
<body onload="fontSizer()"> <p id="font">Test</p> </body>
solution2
0 ACCPTED 2016-09-25 17:04:05
you can raise the event on the body onload event.
<body onload="init()">
<p id="font">Test</p>
</body>
This will call your function if you put it but one good way it to pass to an intermediate function where you call all this kinf of function (if you have several) :
function init() {
fontSizer();
//other method to call during the body loading
}
And if you want i can purpose you the following optimization for your code :
function fontSizer() {
var element = document.getElementById("font");
if (element.style.fontSize == "15px") {
elemeny.style.fontSize = "10px";
return;
}
element.style.fontSize = "15px"
}
You can also use css animation by using something like :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
@keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
solution3
0 2016-09-25 18:12:11
You can do it without javascript function, only with css animation :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
@keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
solution4
0 2016-09-26 05:56:19
Well JavaScript not work Good Its work fine with animation css
CSS:
<style>
@keyframes fadeIn {
from { font-size: 20px; color:red;}
}
.animate-flicker {
animation: fadeIn 0.2s infinite alternate;
}
</style>
HTML
<span class="animate-flicker">Text</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.