<html>
<head>
<meta charset='utf-8'/>
<title>Emoji Animation - RJM Programming - May, 2022 ... thanks to https://dev.to/anthonyjdella/how-to-animate-an-emoji-with-css-5eb9</title>
<style>
.waving:before {
content: attr(data-hover);
font-size:84px;
margin-top:150px;
margin-right:150px;
margin-left:150px;
margin-bottom:150px;
}
.waving {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}
@keyframes wave-animation {
0% {
transform: rotate( 0.0deg) }
10% {
tRansform: rotate(14.0deg) }
20% {
trAnsform: rotate(-8.0deg) }
30% {
traNsform: rotate(14.00deg) }
40% {
tranSform: rotate(-4.0deg) }
50% {
transForm: rotate(10.0deg) }
60% {
transfOrm: rotate( 0.00deg) }
100% {
transfoRm: rotate( 0.000deg) }
}
</style>
<script type='text/javascript'>
var wasih='', isih='', dho='';
function newwin(divo) {
var wo=window.open('','_blank','left=10,top=10,width=' + eval(-20 + screen.width) + ',height=' + eval(-20 + screen.height));
if (dho != '') {
wo.document.write('<html>' + dho + '<body>' + divo.outerHTML + '</body></html>');
} else {
wo.document.write('<html>' + document.head.outerHTML + '<body>' + divo.outerHTML + '</body></html>');
}
}
function iframeit(tao) {
document.getElementById('toptable').style.opacity='0.0';
document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);
if (1 == 1) {
document.getElementById('ifp').style.display='block';
document.getElementById('ifp').style.position='absolute';
document.getElementById('ifp').style.top='0px';
document.getElementById('ifp').style.left='0px';
document.getElementById('ifp').style.width='100%';
document.getElementById('ifp').style.height='100vh';
document.getElementById('ifp').style.zIndex='99';
//document.getElementById('ifp').style.opacity='1.0';
}
}
function checkforparent() {
if (window.parent != window) {
dho=document.head.outerHTML.replace('<style' + document.head.outerHTML.split('<style')[1].split('</style>')[0] + '</style>', parent.document.getElementById('css').value);
document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;
document.getElementById('css').value=parent.document.getElementById('css').value;
document.getElementById('words').value=parent.document.getElementById('words').value;
document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;
showb();
}
}
function emailit() {
var emis=prompt('Email address to send to?', '');
if (emis != null) {
if (emis.trim() != '') {
if (emis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + emis);
//document.getElementById('myemail').click();
//parent.document.getElementById('myform').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
//parent.document.getElementById('myform').target='jfp';
document.getElementById('myform').target='jfp';
//alert('ReadY');
document.getElementById('subbut').click();
//alert('REadY');
//top.location.href=document.URL.split('?')[0];
//alert('REAdY');
} else if (emis.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + emis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else {
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
function smsit() {
var smsis=prompt('Mobile number to SMS to?', '');
if (smsis != null) {
if (smsis.trim() != '') {
if (smsis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + smsis);
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else if (smsis.replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + smsis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
function showb() {
document.getElementById('bemail').style.display='inline-block';
document.getElementById('bsms').style.display='inline-block';
}
</script>
</head>
<body onload=" checkforparent(); ">
<table id=toptable border=12 cellpadding=3 cellspacing=3><tr><td style=vertical-align:top; title='Click to show card above in new window' onclick="newwin(document.getElementById('box'));" ondblclick="newwin(document.getElementById('box'));">
<div data-hover='👋 ' id=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=isih; } ">Hi</div><br>
</td><td style=vertical-align:top;text-align:center;><h1>Emoji Animation <input type=button onclick=emailit(); style=display:none; id=bemail value='Email 📧'></input> <input type=button onclick=smsit(); style=display:none; id=bsms value='SMS 📟'></input></h1><h3>RJM Programming - May, 2022</h3><h4>Thanks to <a target=_blank title=https://dev.to/anthonyjdella/how-to-animate-an-emoji-with-css-5eb9 href='https://dev.to/anthonyjdella/how-to-animate-an-emoji-with-css-5eb9'>How to Animate an Emoji with CSS</a></h4>
</td><td style=vertical-align:top;>
<form id=myform method=POST action=./emoji_animation.php>
<table border=18 style=background-color:orange;>
<tr><th>Words</th><th><input id=subbut type=submit value=Post style=background-color:pink;display:none;></input> CSS</th></tr>
<tr><td style=vertical-align:top;><textarea id=words name=words rows=40 onblur=" showb(); isih=this.value; if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } } document.getElementById('box').innerHTML=isih; ">Hi</textarea></td>
<td style=vertical-align:top;><textarea id=css name=css cols=52 rows=40 onblur=" showb(); iframeit(this); " title='Can use, within that SVG defining the card border, an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard).'><style>
.waving:before {
content: attr(data-hover);
font-size:84px;
margin-top:150px;
margin-right:150px;
margin-left:150px;
margin-bottom:150px;
}
.waving {
animation-name: wave-animation;
animation-duration: 3.0s;
animation-iteration-count: infinite;
transform-origin: 70% 70%;
}
@keyframes wave-animation {
0% {
transform: rotate( 0.0deg) }
10% {
tRansform: rotate(14.0deg) }
20% {
trAnsform: rotate(-8.0deg) }
30% {
traNsform: rotate(14.00deg) }
40% {
tranSform: rotate(-4.0deg) }
50% {
transForm: rotate(10.0deg) }
60% {
transfOrm: rotate( 0.00deg) }
100% {
transfoRm: rotate( 0.000deg) }
}
</style>
</textarea></td></tr></table>
<div id=eof style=display:none;></div>
</form>
</td></tr></table>
<iframe name=ifp id=ifp style=display:none; src=''></iframe>
<div id=spares style=display:none;></div>
<iframe name=jfp id=jfp style=display:none; src=''></iframe>
</body>
</html>