যারা ওয়েব ডিজাইনিং ও ডেভেলপিং করেন তারা jQuery এর সাথে পরিচিত। jQuery আমাদের বর্তমান সময়ের একটা প্রয়োজনীয় জাভা স্ক্রীপ্ট লাইব্রেরী। আসুন আজ আমরা jQuery ব্যবহার করে যেকোন লিখার পেছনের ব্যাকগ্রাউন্ডকে চলমান করবো।
এই কাজের জন্য আমাদের যা যা করতে হবে, তা হলো
- একটি ছবি যেটার মধ্যে কিছু গর্ত করা লিখা থাকবে। নিচে আমি আলোচনা করবো কি করে ছবি টা বানাবেন।
- এরপর jQuery এর কোড ব্যবহার করে আমরা একটা HTML ফাইল বানাবো যেখানে লিখার পেছনে চলমান ছবি দেখতে পাবো।
এবার আসুন Photoshop দিয়ে আমরা একটা ছবি বানাবো।
প্রথমে Photoshop রান করে নিউ একটা ইমেজ নেন।
এরপর বামের প্যানেল থেকে একটা চারকোনা কালো Shape নেন। এরপর আপনি যে লিখা বানাতে চান সেটা বামের প্যানেল থেকে Text নিয়ে লিখুন।
এবার বামের প্যানেল থেকে Layer এ গিয়ে আপনার লিখার Layer এ CTRL + ক্লিক করে সিলেক্ট করুন।
এবার Select মেনু থেকে Inverse এ ক্লিক করুন।
ক্লিক করলে নিচের মত দেখতে পাবেন
এবার Layer থেকে Shape Layer কে সিলেক্ট করে Mask এ ক্লিক করুন
এবার Background ও লিখার Layer গুলোকে Hide করে দিন (Layer এ যে চোখের মত ছোট ছবি আছে সেখানে ক্লিক করুন)। এবার নিচের মত দেখতে পাবেন
এবার File Menu থেকে Save As দিয়ে ছবিটাকে PNG ফরমাটে সেভ করুন।
এবার আমরা HTML ফাইল বানাবো এবং jQuery ব্যবহার করে আমাদের বানানো লিখার নিচে একটা চলমান ছবি ব্যবহার করবো ।
এবার নিচের HTML কোড কপি করে একটা TEXT ফাইলে সেভ করুন index.html নামে ।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery দিয়ে লিখার পেছনে চলমান ছবি : MEHEDI.COM.BD</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sm-move-bg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
moveBgAround();
});
function moveBgAround() {
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
var time = Math.floor(Math.random()*1001) + 2000;
$('.scrollBg').animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
moveBgAround();
});
}
</script>
</head>
<body>
<div class='content'>
<h1 align="center">jQuery দিয়ে লিখার পেছনে চলমান ছবি</h1>
<div class='scrollBg' style='background-image: url(pattern.jpg)'>
<a href="http://www.mehedi.com.bd"><img src='mehedi.png' alt='' border="0" /></a> </div>
</div>
</body>
</html>
এবার নিচের কোডগুলো কপি করে একটা Text ফাইলে সেভ করুন style.css নামে এবং index.html ফাইলের পাশে রাখুন ।
body {
background-color: #000000;
color: #cdcdcd;
font-size:16px;
font-family: SolaimanLipi, Arial,Verdana,Tahoma;
}
a {
color: #ff7e00;
text-decoration:none;
}
a:hover {
color: #ffb400;
}
.content {
width: 600px;
margin: 0px auto;
}
.scrollBg {
background-image: url(pattern.jpg);
background-color: #000000;
width: 600px;
height: 300px;
}
.scrollBg img {
display: block;
}
এবার নিচের ফাইল ডাউনলোড করে আনজিপ করে সব ফাইল index.html ফাইলের পাশে রাখুন ।
এবার index.html ফাইলটটা রান করুন এবং উপভোগ করুন jQuery এর মজা ।
ডেমো দেখার জন্য এখানে ক্লিক করুন ।
আসলে এই টিউটোরিয়াল টা অনেক বড় হবে তাই আমি HTML এর ধাপগুলো সংক্ষেপে দিয়েছি । আপনাদের সুবিধার জন্য সম্পূর্ণ প্রোজেক্টের ডাউনলোড লিংক দেয়া হলো। আপনারা ডাউনলোড করে উপভোগ করতে পারেন ।
সম্পূর্ণ প্রোজেক্টের ডাউনলোড লিংক ।
29 টি মতামত করা হয়েছে“jQuery দিয়ে লিখার পেছনে চলমান ছবি”
ট্যাকব্যাক/পিংব্যাক
- CSS3 ও jQuery এর মজা !!! | অজানা ইনফরমেশন - [...] আগে আমি jQuery এর উপর পোষ্ট করেছিলাম আশা করি সেটা সবাই চেষ্ঠা [...]
অজানা ইনফরমেশনে আপনাদের সবাইকে স্বাগতম । আমি এস এম মেহেদী হাসান, একজন ওয়েব ডিজাইনার এবং ডেভলপার । আপনার ওয়েব ডিজাইনিং, ওয়েব ডেভলপিং, সার্চ ইন্জিন অপটিমাইজেশন, জুমলা, ওয়ার্ডপ্রেস, ডোমেইন, হোস্টিং সম্পর্কে কোন প্রয়োজন হলে আমার সাথে যোগাযোগ করতে পারেন ।
মেহেদী ভাই ট্রাই করলাম। পুরা ই জটিল লাগলো।
যাই হোক আপমি আরো এডিট করে নিব পরে
ধন্যবাদ রলিন ।
এক কথায় আসাধারন……ভাই আরো কিছু চাই………………
ধন্যবাদ পাশা । আমি চেষ্ঠা করবো আরো নতুন কিছু পোষ্ট করার ।
ছবি বানিয়ে দেব কথায়? web সাইট নই
মেহেদি হাসান ভাইয়া,
আমি ওয়েব ডেভলপিং এবং ডিজানিং শিখতে চাই। সে জন্য আপনার পরামর্শ দরকার। আমাকে একটু হেল্প করবেন প্লিজ…!
আমাকে একটা মেইল করবেন প্লিজ…
আপনার বানানো অজানা ইনফো এবং বাংলার কবি সাইট দুইটা আমার কাছে অসাধারণ লেগেছে…
Nejam Kutubi ভাই .. এটা শিখে রাখেন নিজের সাইট হলে ব্যবহার করতে পারবেন । ধন্যবাদ ।
সাইফ হাসনাত ধন্যবাদ । আমাকে ফোন করেন । আমি চেষ্ঠা করবো আপনাকে পরামর্শ দেবার । আর ধন্যবাদ আমার সাইটগুলো ভিজিট করার জন্য । আর আপনি অবশ্যই বাংলার কবি তে যোগ দেবেন এবং আশা করি আপনার লিখা নিয়মিত দেখবো ।
মুলটা শিখে রাখলাম। অজানা ইনফরমেশনত আর বন্ধ হছেনা?serch দিয়ে নেবো
ধন্যবাদ নিজাম ভাই ।
ভালো লাগলো
ধন্যবাদ মামুন ভাই ।
আপনি অনলাইনে আছেন কিনা কি ভাবে বুঝব
nejamkutubi.com
ডোমেইন নেইম’টি কিনতে কত টাকা নেবেন (কম করে বলবেন। এক দাম। শুধু রেজিষ্ট্রেশন কিন্তু)। কোন ফ্রি সার্ভিসও দিতে হবেনা ডিজাইনও করতে হবেনা। সব আমি করব। যা যানি তাই দিয়ে সাজাবো। হ-য-ব-র-ল হলেও সবাইকে বলতে পারব নিজে নিজে করেছিত তাই অমন হয়েছে। নিজের ছেলে কানা, বোবা, আঁতুর, কালা হলেও বিউটিফুল। দ্রত জানাবেন।
Nejam Kutubi ভাই আপনাকে ইমেইল করে দিয়েছি । চেক করুন ।
অনেক কাজের জিনিস নিয়ে লিখেন। চালিয়ে যান….অনেকেই হঠাৎ থেমে যায়।
ব্লগের থিমটা ভাল.
.বানিয়েছেন ?
থিমের নাম কি?
ধন্যবাদ শাহী মির্জা ।
এত সুন্দর লেখার জন্য আপনাকে অনেক ধন্যবাদ।
ধন্যবাদ জাহিদ ।
ধন্যবাদ। দারুন টিউনস। খুবই ভাল লিখেছেন।
ধন্যবাদ সাইদ ভাই ।
আমি একটা ডোমেইন কিনতে চাই । বর্তমানে ফ্রী ডোমেইন ইউজ করতেছি। তাই ভালো করে ডিজাইন করিনি। আমার ওয়েব সাইট টি হবে http://www.friendcircle.com কিন্তু বর্তমানে http://www.friendcircle.yolasite.com সাইট টি ব্যভার করছি।
ধন্যবাদ স্কাইর্লাক । আপনি http://domain.mehedi.com.bd তে আপনার ডোমেইন চেক করুন । আমি চেক করেছি । আপনার ডোমেইন নাম টি অন্য একজন নিয়ে নিয়েছে ।
script ta jotil-onek valo but vabse use korbo kothaye, banner-a use kora jabe?
aita to full page, banner-a use korajie ke vabay.
ধন্যবাদ শামিম। এটা আমি ফুল পেজে করেছি তাই আপনি ফুল দেখছেন । আপনি লোগো যত বড়/খুশি ব্যবহার করতে পারবেন । এবং আপনি ব্যনার ও লোগো তে এই ইফেক্ট ব্যবহার করতে পারবেন।
bai kub comotkar
suvo kamna aro onek chai
bai sobi jukto korbo kibabe
অসংখ্য ধন্যবাদ সুন্দর একটি পোষ্টের জন্য । আমি এটি আমার সাইট এ কিভাবে ব্যবহার করতে পারব তা যদি বিস্তারিত বলেন তাহলে অনেক উপকার হবে । ভাল থাকবেন ।