விழும் நிழல் எழுத்துக்களை எப்படி உருவாக்கலாம்

 

நண்பர்களே நலமா ? நலம் என நினைக்கிறேன் .இன்று நாம் பார்க்க போவது விழும் நிழல் எழுத்துக்கள் . எழுத்துக்கள் இருந்த இடத்தில் ஒன்று ஒன்றாக கீழே விழுந்து கொண்டே இருக்கும் எழுத்துக்கள் தான் வித்தியாசமான முறையில் வடிவமைக்கப் பட்டது .

கீழே உள்ள நிரலை ]]</b:skin> -க்கு முன்னால் Paste செய்து கொள்ளவும் .

<style>
.wesmob{display:inline;text-indent:5px;letter-spacing:5px;font-size:25px;font-weight:bold;text-shadow:1px 2px 3px #000;line-height:2.5;margin:0 3px}.wesmob-labuh span{position:absolute;opacity:0;overflow:hidden;color:#debe94;-webkit-transform-origin:10% 75%;-moz-transform-origin:10% 75%;-ms-transform-origin:10% 75%;-o-transform-origin:10% 75%;transform-origin:10% 75%;-webkit-animation:rotateWord 18s linear infinite 0s;-moz-animation:rotateWord 18s linear infinite 0s;-o-animation:rotateWord 18s linear infinite 0s;-ms-animation:rotateWord 18s linear infinite 0s;animation:rotateWord 18s linear infinite 0s}.wesmob span:nth-child(2){-webkit-animation-delay:3s;-moz-animation-delay:3s;-o-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s;color:#f00}.wesmob span:nth-child(3){-webkit-animation-delay:6s;-moz-animation-delay:6s;-o-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s;color:#ff0}.wesmob span:nth-child(4){-webkit-animation-delay:9s;-moz-animation-delay:9s;-o-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s;color:#5c0}.wesmob span:nth-child(5){-webkit-animation-delay:12s;-moz-animation-delay:12s;-o-animation-delay:12s;-ms-animation-delay:12s;animation-delay:12s;color:#56f}
.wesmob span:nth-child(6){-webkit-animation-delay:15s;-moz-animation-delay:15s;-o-animation-delay:15s;-ms-animation-delay:15s;animation-delay:15s;color:#f6f}@-webkit-keyframes rotateWord{0%{opacity:0}5%{opacity:1}17%{opacity:1;-webkit-transform:rotate(0deg)}19%{opacity:1;-webkit-transform:rotate(98deg)}21%{opacity:1;-webkit-transform:rotate(86deg)}23%{opacity:1;-webkit-transform:translateY(85px) rotate(83deg)}25%{opacity:0;-webkit-transform:translateY(150px) rotate(80deg)}80%{opacity:0}100%{opacity:0}}@-moz-keyframes rotateWord{0%{opacity:0}5%{opacity:1}17%{opacity:1;-moz-transform:rotate(0deg)}19%{opacity:1;-moz-transform:rotate(98deg)}21%{opacity:1;-moz-transform:rotate(86deg)}23%{opacity:1;-moz-transform:translateY(85px) rotate(83deg)}25%{opacity:0;-moz-transform:translateY(150px) rotate(80deg)}80%{opacity:0}100%{opacity:0}}@-o-keyframes rotateWord{0%{opacity:0}5%{opacity:1}17%{opacity:1;-o-transform:rotate(0deg)}19%{opacity:1;-o-transform:rotate(98deg)}21%{opacity:1;-o-transform:rotate(86deg)}23%{opacity:1;-o-transform:translateY(85px) rotate(83deg)}25%{opacity:0;-o-transform:translateY(150px) rotate(80deg)}80%{opacity:0}100%{opacity:0}}@-ms-keyframes rotateWord{0%{opacity:0}5%{opacity:1}17%{opacity:1;-ms-transform:rotate(0deg)}19%{opacity:1;-ms-transform:rotate(98deg)}21%{opacity:1;-ms-transform:rotate(86deg)}23%{opacity:1;-ms-transform:translateY(85px) rotate(83deg)}25%{opacity:0;-ms-transform:translateY(150px) rotate(80deg)}80%{opacity:0}100%{opacity:0}}@keyframes rotateWord{0%{opacity:0}5%{opacity:1}17%{opacity:1;transform:rotate(0deg)}19%{opacity:1;transform:rotate(98deg)}21%{opacity:1;transform:rotate(86deg)}23%{opacity:1;transform:translateY(85px) rotate(83deg)}25%{opacity:0;transform:translateY(150px) rotate(80deg)}80%{opacity:0}100%{opacity:0}}</style>

பின்னர் பதிவில் மற்றும் விட்ஜெட் பயன்படுத்தலாம் .

பதிவில் பயன்படுத்த :

புதிதாக பதிவு எழுதும் போது மேலே Compose மற்றும் HTML என்ற பொத்தான்களில் HTML பொத்தானை அழுத்தி கீழே வரும் கோடிங்கை Paste செய்யவும் .

<div class="wesmob wesmob-labuh">
<span>Text here...</span><span>Text here...</span><span>Text here...</span><span>Text here... </span><span>Text here...</span><span>Text here...</span>
</div>

விட் ஜெட்-ல் வைக்க மேலே உள்ள நிரலை add a widget -HTML &Java Script -தேர்வு செய்து அங்கே Paste செய்யவும் .
அதிக  text-கள் தேவைப்பட்டால் <span>Text here...</span> என்பதை </div> -க்கு முன்னால் தேவையான வரையில் சேர்த்துக் கொள்ளவும் .HTML -பகுதியில் வைத்தே இடுகையை Publish செய்யவும்

விட் -ஜெட்ல் வைக்க

Demo (டெமோ )

உங்களைத்தவிர வேறு யாராலும் உங்களுக்கு அமைதியை தர முடியாது..என்டர் ப்ளஸ்™ +

நன்றி.....