drstuggels
Reputation: 132
Animating Text In Javascript
So my problem is that I want to animate text (opacity) in js after you press enter, but I don't know how to do it with my code that I wrote. I can't explain why I can't animate but I can show ALL my code and you'll understand.
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
theaction();
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function titleCase(str) {
str = str.toLowerCase().split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].split('');
str[i][0] = str[i][0].toUpperCase();
str[i] = str[i].join('');
}
return str.join(' ');
}
function theaction() {
var int = document.getElementById("every").value;
var inp = int.toUpperCase();
var lop;
var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];
if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {
if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
window.location.href = inp.toLowerCase();
}
else {
var ht = "http://";
var loplink = ht.concat(inp);
window.location.href = loplink;
}
}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
var ddgsearch = inp.substr(4);
window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
var qwantsearch = inp.substr(6);
window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
var hslsearch = inp.substr(4);
window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
var nameis = inp.split("IS ")[1];
var namelow = nameis.toLowerCase();
var namefcap = titleCase(namelow);
var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
lop = lop.replace(",", " ");
document.getElementById("output").innerHTML = lop;
}
else {
lop = "You have a beutiful name!";
document.getElementById("output").innerHTML = lop;
sleep(5000);
window.location.href = "http://www.zombo.com";
}
}
else if (inp.includes("BG:")) {
var bgGoodness = inp.substr(3);
document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
else {
switch(inp){
case 'HEY':
case 'HEY!':
case 'HI!':
case 'HI':
case 'HELLO':
case 'HELLO!':
lop = "Hey!";
break;
case 'HEY SIRI!':
case 'HEY SIRI':
case 'HI SIRI':
case 'HI SIRI!':
case 'HELLO SIRI':
case 'HELLO SIRI!':
lop = "I'm not Siri! I'm dat BOiiii!";
break;
case 'FOO':
lop = "Bar";
break;
case 'BAR':
lop = "Foo";
break;
case 'FOOBAR':
case 'FOO BAR':
lop = 'Searching for bars called "Foo".....';
break;
case 'WHAT TIME IS IT?':
case 'WHAT TIME IS IT':
case 'WHAT IS THE TIME?':
case 'WHAT IS THE TIME?':
lop = "DEMO: " + Date();
break;
default:
lop = "U WOT M8??";
break;
}
document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
document.getElementById("every").style.width = "600px";
document.getElementById("every").style.borderColor = "blue";
document.getElementById("every").style.cursor = "auto";
}body {
padding: 0;
background-color: #ecf0f1;
}
#every {
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 0px;
margin-bottom: 0px:;
width: 300px;
/*340px*/
height: 30px;
/*70px*/
margin-left: -173.4px;
margin-top: -38.08px;
padding: 20px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
border: 1px solid #000;
border-radius: 5px;
background-color: #fff;
color: #000;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:hover {
border-color: #2980b9;
background-color: #fff;
color: #000;
}
#every:focus {
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
cursor: pointer;
}
#output {
padding: 0px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#outwrapper {
height: 120px;
width: 500px;
position: absolute;
top: 55%;
left: 50%;
padding: 0px;
margin-left: -250px;
margin-top: 0px;
margin-bottom: 0px:
margin-right: 0px;
text-align: center;
}<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>http://jsbin.com/sevesujubo/edit?html,js,output
Im sorry about the weird ID and function names. And no jquery plz, even if it would make it easier.
P.S Even if you can't help me, it would be nice if you could improve my code. Thanks (:
Upvotes: 3
Views: 378
Answers (1)
Bourbia Brahim
Reputation: 14702
If I've understand ,To set a an opacity animation on the rendered text you'll :
set transition property to the output paragraph (already set in your css)
and add the below code in your handle function ;
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
//---- added code
document.getElementById("output").style.opacity = 0;
setTimeout(function(){
theaction();
document.getElementById("output").style.opacity = 1;
},500);
//----
}
}
so first set opacity to 0 after wait 500 millisconds then execute theaction(); and set the opacity again to 1 ( css transition will make the annimation )
below working Fiddle :
function handle(e){
if(e.keyCode === 13){
e.preventDefault();
document.getElementById("output").style.opacity = 0;
setTimeout(function(){
theaction();
document.getElementById("output").style.opacity = 1;
//alert("yo")
},500);
}
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function titleCase(str) {
str = str.toLowerCase().split(' ');
for(var i = 0; i < str.length; i++){
str[i] = str[i].split('');
str[i][0] = str[i][0].toUpperCase();
str[i] = str[i].join('');
}
return str.join(' ');
}
function theaction() {
var int = document.getElementById("every").value;
var inp = int.toUpperCase();
var lop;
var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];
if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {
if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
window.location.href = inp.toLowerCase();
}
else {
var ht = "http://";
var loplink = ht.concat(inp);
window.location.href = loplink;
}
}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
var ddgsearch = inp.substr(4);
window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
var qwantsearch = inp.substr(6);
window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
var hslsearch = inp.substr(4);
window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
var nameis = inp.split("IS ")[1];
var namelow = nameis.toLowerCase();
var namefcap = titleCase(namelow);
var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
lop = lop.replace(",", " ");
document.getElementById("output").innerHTML = lop;
}
else {
lop = "You have a beutiful name!";
document.getElementById("output").innerHTML = lop;
sleep(5000);
window.location.href = "http://www.zombo.com";
}
}
else if (inp.includes("BG:")) {
var bgGoodness = inp.substr(3);
document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
else {
switch(inp){
case 'HEY':
case 'HEY!':
case 'HI!':
case 'HI':
case 'HELLO':
case 'HELLO!':
lop = "Hey!";
break;
case 'HEY SIRI!':
case 'HEY SIRI':
case 'HI SIRI':
case 'HI SIRI!':
case 'HELLO SIRI':
case 'HELLO SIRI!':
lop = "I'm not Siri! I'm dat BOiiii!";
break;
case 'FOO':
lop = "Bar";
break;
case 'BAR':
lop = "Foo";
break;
case 'FOOBAR':
case 'FOO BAR':
lop = 'Searching for bars called "Foo".....';
break;
case 'WHAT TIME IS IT?':
case 'WHAT TIME IS IT':
case 'WHAT IS THE TIME?':
case 'WHAT IS THE TIME?':
lop = "DEMO: " + Date();
break;
default:
lop = "U WOT M8??";
break;
}
document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
document.getElementById("every").style.width = "600px";
document.getElementById("every").style.borderColor = "blue";
document.getElementById("every").style.cursor = "auto";
}body {
padding: 0;
background-color: #ecf0f1;
}
#every {
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 0px;
margin-bottom: 0px:;
width: 300px;
/*340px*/
height: 30px;
/*70px*/
margin-left: -173.4px;
margin-top: -38.08px;
padding: 20px;
vertical-align: middle;
font-family: 'Open Sans', sans-serif;
border: 1px solid #000;
border-radius: 5px;
background-color: #fff;
color: #000;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:hover {
border-color: #2980b9;
background-color: #fff;
color: #000;
}
#every:focus {
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
cursor: pointer;
}
#output {
padding: 0px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
margin: 0px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#outwrapper {
height: 120px;
width: 500px;
position: absolute;
top: 55%;
left: 50%;
padding: 0px;
margin-left: -250px;
margin-top: 0px;
margin-bottom: 0px:
margin-right: 0px;
text-align: center;
}<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>Upvotes: 2