Sponsorluk

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>
Site içinde arama yapın
Kategoriler
Read More
Nulled
Google I/O 2026 এ নতুন ইতিহাস সৃষ্টি হয়ে গেল! Gemini 3.5 Flash এবং Gemini Spark এর সাথে থাকছে Gemini Omni যা করবে 32 Quadrillion Tokens প্রসেস আর মাত্র 12 Hours এ AI বানাবে আস্ত OS! | Techtunes | টেকটিউনস
অ্যাপল মানুষকে ফিরিয়ে নিচ্ছে হাত ঘড়ির যুগে… অসামান্য প্রাযুক্তিক উৎকর্ষতায়! একটি Apple...
By Nettumi 2026-09-21 05:26:10 0 23
Nulled
IP.IM - IP Address নিয়ে আর টেনশন নয়! 🥳 সুপার ফাস্ট এই টুলটি Terminal এও চলবে! 🚀 | Techtunes | টেকটিউনস
অ্যাপল মানুষকে ফিরিয়ে নিচ্ছে হাত ঘড়ির যুগে… অসামান্য প্রাযুক্তিক উৎকর্ষতায়! একটি Apple...
By Nettumi 2026-09-21 05:26:55 0 35
Tech
ফোন চুরি রোধ করার সেরা অ্যান্ড্রয়েড অ্যাপ - Banglatech24.com
নিজের শখের ফোনটি চুরি হওয়া থেকে রক্ষা করতে চায় সবাই। তাই আগে থেকে অ্যান্ড্রয়েড ডিভাইসে একটি...
By Nettumi 2026-09-25 10:09:26 0 14
Nulled
Smart School Android App v5.0 - Mobile Application for Smart School
Smart School Android App v5.0 – Mobile Application for Smart School Source Code Free...
By Nettumi 2026-09-17 18:09:56 0 42
Hacking Course
📊🚀 Microsoft Text to Columns ব্যবহার করে Single Cell থেকে Multiple Data আলাদা করার পদ্ধতি 📂🔥
আসসালামু আলাইকুম সবাই কেমন আছেন…..? আশা করি সবাই আছেন । আমি আল্লাহর রহমতে ভালোই আছি ।আসলে...
By Nettumi 2026-09-25 16:56:29 0 16
‎ ‎ ‎
Nettumi https://nettumi.com