আমরা আমাদের কচ্ছপ মার্কা গতিতে নেট চালাতে চালাতে বিরক্ত। পেজ লোডিং হয় আর ব্রাউজারের লোডিং বারে তাকিয়ে থাকি অপেক্ষায়। এবার এই ওয়েবপেজ লোডিং নিয়েই আমার আজকের টিউন।
আপনার ব্লগ বা ওয়েবসাইটে যোগ করতে পারেন একটি আকর্ষণীয় পেজ লোডিং ইফেক্ট। যা আপনার ভিজিটরকে ভিন্ন স্বাদ দিবে। আপনারা অনেক সাইটে লক্ষ্য করেছেন এক পেজ থেকে অন্য পেজে যাওয়ার সময় বিভিন্ন লোডিং ইফেক্ট দেখায়। লোডিং হওয়ার সময় কম বেশী না হলেও লোডিং হওয়ার চিরাচরিত স্বাদ থেকে পাওয়া যান একটু ভিন্ন স্বাদ। আজ তেমনই একটি আকর্ষণীয় ওয়েবপেজ লোডিং ইফেক্ট নিয়ে এসেছি আপনার ওয়েবসাইট কিংবা ব্লগের জন্য। এই ইফেক্ট আমিও আমার বাংলা ব্লগে ব্যবহার করছি। দেখে আসতে পারেন এখানে থেকে।
<div id='loader'>
<div>
<div>
<div><span>loading...</span>
<span><data:blog.title/></span>
</div></div> </div></div>
<div>
<a href="http://www.bloggermaruf.com" rel="dofollow">Blogger Maruf</a> and <a href="http://rupayon24.blogspot.com" rel="dofollow">Rupayon 24</a>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".wrap").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>.widgetcredit{text-indent: -9999px;}#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>
টিউনটি ভালো লেগে থাকলে বেশী না একটা লাইক চাই আমার ফেসবুক পেজে 😆 😛 । আর টিউনটি প্রথম এখানে প্রকাশ করেছি।
আমি ব্লগার মারুফ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 196 টি টিউন ও 1301 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমি মারুফ। প্রযুক্তিকে ভালোবাসি। তাই গড়তে চাই প্রযুক্তির বাংলাদেশ। পড়াশুনা করছি রংপুরের বেগম রোকেয়া বিশ্ববিদ্যালয়ে অ্যাকাউন্টিং এন্ড ইনফরমেশন সিস্টেমস বিভাগে। আমার ওয়েবসাইটঃ https://virtualvubon.com এবং https://www.rupayon.com
@ধূপছায়া: অনেক ধন্যবাদ ভাইয়া। লাইভ চ্যাট লাগানোর টিউটোরিয়াল লিংকঃ http://www.bloggermaruf.com/2014/01/free-live-chat-gadget-for-website.html
প্রিয় টিউনার,
আপনার টিউন যেহেতু প্রোগ্রামিং সংক্রান্ত টিউন ও টিউনে কোডের ব্যবহার রয়েছে তাই বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড যেমন HTML, CSS, JS, PHP ইত্যাদি কোড সুন্দর ও সঠিক ভাবে দেখাতে টেকটিউনসের রয়েছে নিজেস্ব “কোড হাইলাইটার”। টেকটিউনস কোড হাইলাইটার ব্যবহার করার জন্য Code Escape করার প্রয়োজন নেই।
টেকটিউনসের “কোড হাইলাইটার” কিভাবে ব্যবহার করতে হয় তা জানতে https://www.techtunes.io/web-design/tune-id/77692/ এই টিউনটি দেখুন।
নিয়মিত টিউন করুন ধন্যবাদ আপনাকে।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
দারুণ টিউন। আচ্ছা, আপনার ব্লগে লাইভ চ্যাটিং টা আমার কাছে বেশ ভালো লেগেছে। কিভাবে আমার ব্লগার ব্লগে এড করতে পারি?