এই কাজের জন্য আমাদের যা যা করতে হবে, তা হলো
- একটি ছবি যেটার মধ্যে কিছু গর্ত করা লিখা থাকবে। নিচে আমি আলোচনা করবো কি করে ছবি টা বানাবেন।
- এরপর 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 এর মজা।