Friday, June 15, 2012

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

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

கீழே உள்ள நிரலை ]]</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 (டெமோ )

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

நன்றி.....

10 comments:

  1. நன்றாக உள்ளது

    ReplyDelete
  2. இந்த மாதிரி பதிவுகள் எல்லாம் உங்களால் மட்டும் தான் எழுத முடியும் நல்ல அருமையான பதிவு நன்றி ..........

    ReplyDelete
  3. நல்ல இருக்குது நண்பரே, ஆனால் இது ப்ளாக் லோட் நேரத்தை குறைக்குமா.?

    ReplyDelete
    Replies
    1. நண்பரே இதனால் சிறிதும் நேரம் எடுக்காது . ஒன்றுக்கும் மேற்பட்ட ஜாவா ஸ்கிரிப்ட் களினால் மட்டுமே தளம் கூடுதல் நேரம் எடுக்கும் தங்கள் வருகைக்கும் கருத்துக்கும் நன்றி பாஸ்

      Delete
  4. வணக்கம் நண்பரே!

    உங்களுடைய பதிவுகள் இலங்கைத்தமிழர்கள் பலரை சென்றடைய கூகிள்சிறி திரட்டியில்(http://www.googlesri.com/) இணையுங்கள். உங்கள் பதிவுகளை சுலபமாக கூகிள்சிறி திரட்டியில் நிர்வாகியாவதன் மூலம் சுலபமாக இணைக்கலாம். உங்கள் மின்னஞ்சல் முகவரியை rss4sk@gmail.com என்ற மின்னஞ்சல் முகவரிக்கு மின்னஞ்சல் செய்து நிர்வாகியாகுங்கள். கூகிள்சிறியில் சேர்க்கப்படும் பதிவுகள் தன்னியக்கமுறையில் டிவிட்டர்,பேஸ்புக்,லிங்டின் போன்ற சமூக தளங்களில் பிரசுரமாகி அதிக வாசகர்களை சென்றடையும்.

    தங்கள் மின்னஞ்சலை எதிர்பார்த்து
    யாழ் மஞ்சு

    ReplyDelete
  5. இந்த மாதிரி பதிவுகள் எல்லாம் உங்களால் மட்டும் தான் எழுத முடியும் நல்ல அருமையான பதிவு நன்றி

    ReplyDelete
  6. உங்கள் பதிவுகள் அனைத்தும் அருமை... கட்டணம் இன்றிய உங்கள் ஆசான் சேவையை நாம் பாராட்டுகிறோம். உங்கள் சேவை பலருக்கு தேவை... தொடர்ந்தும் எழுதுங்கள்.. (கற்பியுங்கள்).... வாழ்த்துக்கள்

    http://puthiyaulakam.com

    ReplyDelete