Patrocinado

jQuery এর সাহায্যে ওয়েবসাইটের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন [এনিমেশন] করা।

0
7

jQuery এর সাহায্যে ওয়েবসাইটের ব্যাকগ্রাউন্ড একটারপর একটা পরিবর্তন করা যায়। অনেক সহজেই।

ডেমো দেখুন এখানে।

এর জন্য jQuery কোড গুলোঃ

<script>
jQuery(window).load(function(){
 var images = ['http://jakir.me/wp-content/uploads/2013/04/Forest-Highway.jpg',
 'http://jakir.me/wp-content/uploads/2013/04/highway.jpg'];
 var i = 0;

function changeBackground() {
 jQuery('#thumbs').css('background-image', function() {
 if (i >= images.length) {
 i=0;
 }
 return 'url(' + images[i++] + ')';
 });
 }
 // Call it on the first time
 changeBackground();
 // Set an interval to continue
 setInterval(changeBackground, 5000);
});
</script>

কিভাবে কাজ করে তা একটু ব্যাখ্যা করি। আমরা একটা ভ্যারিয়েবল নিয়েছি যার নাম image. এর মধ্যে আমরা ব্যাকগ্রাউন্ডের জন্য ব্যবহৃত ইমেজের লিঙ্ক গুলো রেখেছি।
আরেকটি ভ্যারিয়েবল নিয়েছি i, যা দিয়ে ইমেজ গুলোর মধ্যে লুপ চালানো হয়েছে পরবর্তিতে।

changeBackground নামে একটা ফাংশন লিখেছি যার মধ্যে jQuery CSS  একের পর এক ব্যাকগ্রাউন্ড সেট করছি। 
setInterval(changeBackground, 5000); কতক্ষন পর পর ব্যাকগ্রাউন্ড পরিবর্তন হবে তা সেট করে দিয়েছি। 
এই। আর কিছু না। অনেক সহজ, তাই না?

আপনি ইচ্ছে করলে কিছু এনিমেশনও যোগ করতে পারেন।

সম্পুর্ন কোডঃ


<!DOCTYPE html>
<html>
<head>

<style>
body{
margin:0;
background:#444;
}
#thumbs{
width:1000px;
height:500px;
margin:0 auto;
padding:50px;
overflow:hidden;
}

#text{
padding:50px;
font-size:18px;
color:#000;
background:#ccc;
opacity:.8;
}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
jQuery(window).load(function(){
    var images = ['http://jakir.me/wp-content/uploads/2013/04/Forest-Highway.jpg',
	'http://jakir.me/wp-content/uploads/2013/04/highway.jpg'];
    var i = 0;

    function changeBackground() {
        jQuery('#thumbs').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';
        });
    }
    // Call it on the first time
    changeBackground();
    // Set an interval to continue
    setInterval(changeBackground, 5000);
});

</script>
</head>
<body>
<div id="thumbs">
<div id="text">
স্বপ্ন দেখতে ভালোলাগে। ভালোলাগে আকাশ কুসুম(!) চিন্তা করতে। সময় পেলেই বই পড়ি। পাঠ্য বই না। গল্পের বই আর সাইন্স ফিকশন। বেশি বই পড়া হয়েছে আমার পিসির সামনে বসে PDF বই। এখন ও পড়ি। যার বেশির ভাগই PDF। ফ্রী বই গুলো ডাউনলোড করে কত যে বইয়ের টাকা বাঁচিয়ে দিয়েছি আল্লাহই জানে। বইয়ের লেখকেরা ক্ষমা করলেই হয়। প্রোগ্রামিং প্র্যাকটিস করলেও অলস। আর অলস বলেই হয়তো পড়তে ভালোবাসি। সবার কাছে দোয়া চাই যেন পড়তে পড়তেই মরতে পারি।
</div>
</div>
</body>
</html>
Pesquisar
Categorias
Leia mais
Tech
১০ টি সাইবার সিকিউরিটি ভবিষ্যৎবাণী যেগুলো আপনার জানা উচিৎ | Techtunes | টেকটিউনস
টিউন্টারভিউ: হাসিন হায়দার, হেড অফ আইডিয়াস এবং প্রতিষ্ঠাতা, Leevio টিউন্টারভিউ হোস্ট : আরিফ...
Por Nettumi 2026-09-25 04:02:34 0 34
Hacking Course
আপনার ওয়েবসাইটের জন্য নিজেই বানিয়ে ফেলুন একটি অ্যাপস! 📱
স্কেচওয়্যার মোবাইল অ্যাপ (Sketchware Mobile App) ব্যবহার করে খুব সহজে ওয়েব ভিউ অ্যাপ তৈরি করার...
Por Nettumi 2026-09-25 16:58:22 0 31
Nulled
Gravity Forms v2.9.28 Nulled - The Best WordPress Form Plugin + All Addons
Gravity Forms v2.9.28 Nulled – The Best WordPress Form Plugin + All Addons Free Download....
Por Nettumi 2026-09-17 18:10:03 0 42
Nulled
Coursela v1.0 Nulled - Personal Course Selling Website PHP Script
Coursela v1.0 Nulled – Personal Course Selling Website PHP Script Free Download. The...
Por Nettumi 2026-09-18 03:24:08 0 127
Tech
এসপ্রেসো মেশিন ব্যবহারের অভিজ্ঞতা
বলা যায় রেগুলার কফি খাওয়া হয় কফিশপে। চায়ের মত আমরা চাইলেই বাসায় কফি বানিয়ে খেতে পারি না। দরকার হয়...
Por Nettumi 2026-09-30 18:40:08 0 4
‎ ‎ ‎
Nettumi https://nettumi.com