Sponsored

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

0
1

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
Tech
হোয়াটসঅ্যাপে অটো রিপ্লাই চালু করার নিয়ম - Banglatech24.com
বর্তমানে হোয়াটসঅ্যাপ ব্যবহার করেনা, এমন স্মার্টফোন ব্যবহারকারী খুঁজে পাওয়া মুশকিল। প্রাইভেসি...
By Nettumi 2026-09-25 10:10:30 0 23
Nulled
CrypLab v2.0 - Crypto Marketplace and Auction Platform Script
CrypLab v1.0 – Crypto Marketplace and Auction Platform PHP Script Free Download. Cryp...
By Nettumi 2026-09-17 18:30:56 0 23
Tech
GitHub - byoungd/up: An advanced guide which might benefit you a lot 🎉 . 韩先凯的人生进阶指南 人生进阶指南 离谱的人生 人生进阶 AI学习 AI指南 韩先凯的AI学习指南 英语学习指南/英语学习教程/英语学习/学英语
title 人生进阶指南|AI 时代终身学习 description 《人生进阶指南》帮助普通人在 AI...
By Nettumi 2026-09-30 19:08:13 0 3
Nulled
Why we destroy the places we travel so far to love
...
By Nettumi 2026-09-23 17:24:53 0 45
Nulled
অ্যানাকোন্ডা vs অজগর কোনটা সবচেয়ে বড় সাপ? ভিডিওসহ | Techtunes | টেকটিউনস
‘নারী’ মানে প্রথম যে কথাটি আসে, তা হলো ‘মা’। Rubel Oron
By Nettumi 2026-09-25 03:20:52 0 27
‎ ‎ ‎
Nettumi https://nettumi.com