Sponsored

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>
Search
Categories
Read More
Nulled
Food Delivery App v2.0 - Food Ordering App|Android + iOS App Template|3 Apps| Multi Restro Cookfu (IONIC 4) App Source
Food Delivery App v2.0 – Food Ordering App|Android + iOS App Template|3 Apps| Multi...
By Nettumi 2026-09-18 04:00:05 0 110
Nulled
LiteHRM v1.0 - Human Resource Management Solution PHP Script
LiteHRM v1.0 – Human Resource Management Solution PHP Script Free Download. Lite HRM is a...
By Nettumi 2026-09-18 03:48:28 0 19
Tech
রবিতে ২০টাকায় ১৫০০এসএমএস কিনে নিন ৩০দিন মেয়াদে | Techtunes | টেকটিউনস
মোবাইলের মাধ্যমে চ্যাট করার কিছু দারুণ সফটওয়্যার মো. আমিনুল ইসলাম সজীব
By Nettumi 2026-09-26 11:49:49 0 6
Tech
Redmi Note 9 কি কেনা ঠিক হবে? | Techtunes | টেকটিউনস
মজিলার নির্বাচিত সাতটি বেস্ট ফায়ারফক্স 3 অ্যাডঅন দুঃসাহসী টিনটিন
By Nettumi 2026-09-25 04:01:10 0 24
Tech
সিএসএস Pseudo-classes
pseudo-classes দিয়ে সুন্দর কিছু কিছু ইলিম্যান্টে আলাদা স্টাইল বা ইফেক্ট দেওয়া যায়। যেমন আমরা সকল...
By Nettumi 2026-09-30 18:44:02 0 1
‎ ‎ ‎
Nettumi https://nettumi.com