إعلان مُمول

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

0
3

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>
البحث
الأقسام
إقرأ المزيد
Tech
অনলাইন এ চাকরির জন্য আবেদন করুন নতুন জব সাইট | Techtunes | টেকটিউনস
মজিলার নির্বাচিত সাতটি বেস্ট ফায়ারফক্স 3 অ্যাডঅন দুঃসাহসী টিনটিন
بواسطة Nettumi 2026-09-25 03:57:19 0 30
Nulled
Taskify Flutter App v1.2.0 - Project Management, Task Manager and Productivity Tool Source - Nulled PHP Scripts
Taskify Flutter App v1.2.0 – Project Management, Task Manager and Productivity Tool...
بواسطة Nettumi 2026-09-17 18:27:26 0 16
Nulled
PlayTube Video Chat and Streaming Add-on from LiveSmart v1.0.5 - Nulled PHP Scripts
PlayTube Video Chat and Streaming Add-on from LiveSmart v1.0.5 Free Download. This is an Addon...
بواسطة Nettumi 2026-09-17 18:25:43 0 35
مهنة
পপুলার ফার্মাসিউটিক্যালস নিয়োগ বিজ্ঞপ্তি ২০২৬ Popular Pharma Job Circular 2026
5/5 - (2 votes)☰ মোট পদের ক্যাটাগরি০১টি👥 মোট শূন্যপদনিদিষ্ট নয়🎓 যোগ্যতাবিএসসি বা এমএসসি ডিগ্রি💰...
بواسطة Nettumi 2026-09-24 18:41:06 0 14
Nulled
eDemand v4.5.0 Nulled - Multi Vendor On Demand Handy Services, Handyman with Flutter App | Admin Panel | Web Version Source
eDemand v4.5.0 Nulled – Multi Vendor On Demand Handy Services, Handyman with Flutter App...
بواسطة Nettumi 2026-09-17 18:14:07 0 48
‎ ‎ ‎
Nettumi https://nettumi.com