كود جميل يظهر الكتابة بالريشة على مدونتك مع جافا سكربت

السلام عليكم ورحمة الله تعالى وبركاته

 اهلا ومرحبا بكم في مدونة مداد الجليد في إضافة جميلة وفريدة من نوعها
كود رائع للكتابة بالريشة يظهر وكأنك تكتب بشكل رائع. يعمل مع جافا سكربت وcss 
يمكن إضافتها داخل مواضيع بلوجر ويمكن إستخدامه في الموضوع مثل كأنك تكتب أي مقال على مدونتك 
ألم تلاحظ كيف كتبت هذا الموضوع؟ حاول إعادة تحميل الصفحة وسوف ترى بالفعل أن هذا الكود سحري
يمكن أن يعمل أيضاً في أي موقع أو صفحة تدعم جافا سكربت وcss 
لقد أعجبني كثيراً فأحببت أن أشاركه معكم أكتب الأن مقال على مدونتك بإستخدام هذا الكود!

tintero
الكود:

<script type="text/javascript">
//<![CDATA[
window.onload = function(){

var vLetter = document.getElementById('escritura');
var iSpeedInk = 5;
var sText = document.getElementById('escritura_src').innerHTML;
var iCurChar = 0;
var sChars = '<span>';
var iCurInk = 0;
var sCurCaret = '';
var sCaret = " <img src='https://lh6.googleusercontent.com/-2y7XCd97kpU/U6GsbIUjZrI/AAAAAAAAY1w/aVgLbQeu7dQ/w116-h143-no/pluma.gif' style='position:absolute' />";

var doStep = function () {
var sChar = sText.charAt(iCurChar);
var iDelay = 32;

if (sChar == '') {
sCurCaret = '';
} else if (sChar == '|') {
sChars = sChars.substring(0, sChars.length-1);
iDelay = 64;
} else if (sChar == '<') {
var iPos = sText.indexOf('>', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '&') {
var iPos = sText.indexOf(';', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '.') {
iDelay = 300;
} else if (sChar == ',') {
iDelay = 100;
} else if (sChar == ' ') {
iDelay = 32;
} else if (iCurChar > 5) {
sCurCaret = sCaret;
}

// expenditure of ink
if (sChar == ' ') {
iCurInk += iSpeedInk;
sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;
}

if (document.getElementById('tintero').style.visibility == 'visible') {
sCurCaret = sCaret;
document.getElementById('tintero').style.visibility = 'hidden';
sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;
}

if (iCurInk > 160) {
iCurInk = 0;
document.getElementById('tintero').style.visibility = 'visible';
iDelay = 1000;
sCurCaret = '';
}

sChars += sChar;

if (iCurChar == sText.length - 1)
sCurCaret = '';

vLetter.innerHTML = sChars + sCurCaret;

iCurChar++;

if (iCurChar < sText.length) {
setTimeout(doStep, 20 + iDelay);
}
}

doStep();
};
//]]>
</script>

<style>
#tintero {
bottom: 100px;
left: 140px;
position: relative;
visibility: hidden;
}
#escritura{
font-family: Comic Sans MS;
font-size: 18px;
font-weight: bold;
margin: 50px auto;
position: relative;
width: 75%;
}
#escritura_src {
display: none;
}
</style>

أضف النص في الكود التالي في المكان المشار إليه

<div id="escritura_src">
ضع النص هنا
</div>

<div id="escritura"></div>
<img alt="tintero" id="tintero" src="https://tech-weba.com/wp-content/uploads/2014/06/tintero2.gif" />