Sponsor

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

0
4

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>
Zoeken
Categorieën
Read More
Nulled
Athena Firewall and Adblocker - ইন্টারনেটের দুনিয়ায় মহাপ্রলয়! Material 3 UI, Root VPN Support, App-Level Network Control এবং DNS Blocklist ফিচারে ঠাসা! | Techtunes | টেকটিউনস
অ্যাপল মানুষকে ফিরিয়ে নিচ্ছে হাত ঘড়ির যুগে… অসামান্য প্রাযুক্তিক উৎকর্ষতায়! একটি Apple...
By Nettumi 2026-09-21 05:29:40 0 17
Nulled
Khulna - Colourful Minimal Digital Agency HTML Template
Khulna – Colourful Minimal Digital Agency HTML Template Free Download. Khulna is a...
By Nettumi 2026-09-17 17:44:19 0 51
Nulled
Anonymo v1.1 - Anonymous Posts and Chats App Source with Admin
Anonymo v1.1 – Anonymous Posts and Chats App Source Code Free Download. The Anonymo...
By Nettumi 2026-09-18 03:55:10 0 22
Tech
আপনার ডিভাইসে ভিপিএন কানেক্ট হতে সমস্যা হয়? এটি ঠিক করার ৫ টি কার্যকর উপায়! | Techtunes | টেকটিউনস
আমার ল্যাপটপই যখন আমার অফিস তমাল আনোয়ার
By Nettumi 2026-09-25 03:59:24 0 26
Nulled
UltimateSpeed PHP Code Generator Enterprise v5.8 - PHP Script - Nulled PHP Scripts
UltimateSpeed PHP Code Generator Enterprise v5.8 – PHP Script Free Download. Ultimate...
By Nettumi 2026-09-17 19:03:38 0 34
‎ ‎ ‎
Nettumi https://nettumi.com