যারা ওয়েব ডিজাইনিং ও ডেভেলপিং করেন তারা jQuery এর সাথে পরিচিত। jQuery আমাদের বর্তমান সময়ের একটা প্রয়োজনীয় জাভা স্ক্রীপ্ট লাইব্রেরী। আসুন আজ আমরা jQuery ব্যবহার করে যেকোন লিখার পেছনের ব্যাকগ্রাউন্ডকে চলমান করবো।
এই কাজের জন্য আমাদের যা যা করতে হবে, তা হলো
প্রথমে Photoshop রান করে নিউ একটা ইমেজ নেন।
এরপর বামের প্যানেল থেকে একটা চারকোনা কালো Shape নেন। এরপর আপনি যে লিখা বানাতে চান সেটা বামের প্যানেল থেকে Text নিয়ে লিখুন।
এবার বামের প্যানেল থেকে Layer এ গিয়ে আপনার লিখার Layer এ CTRL + ক্লিক করে সিলেক্ট করুন।
এবার Select মেনু থেকে Inverse এ ক্লিক করুন।
ক্লিক করলে নিচের মত দেখতে পাবেন
এবার Layer থেকে Shape Layer কে সিলেক্ট করে Mask এ ক্লিক করুন
এবার Background ও লিখার Layer গুলোকে Hide করে দিন (Layer এ যে চোখের মত ছোট ছবি আছে সেখানে ক্লিক করুন)। এবার নিচের মত দেখতে পাবেন
এবার File Menu থেকে Save As দিয়ে ছবিটাকে PNG ফরমাটে সেভ করুন।
আমাদের বানানো লিখার নিচে একটা চলমান ছবি ব্যবহার করবো।
এবার নিচের 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 এর ধাপগুলো সংক্ষেপে দিয়েছি। আপনাদের সুবিধার জন্য সম্পূর্ণ প্রোজেক্টের ডাউনলোড লিংক দেয়া হলো। আপনারা ডাউনলোড করে উপভোগ করতে পারেন।
অজানা ইনফরমেশনসম্প্রতিকালের অজানা ইনফরমেশন… |
আমি মেহেদী.কম.বিডি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 34 টি টিউন ও 280 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
ektu help korben please.
Apni je index.html file ta banate bolechhen, seta te to sudhu ei nam ta i dekhabe.
kintu ami jodi amar existing websiter Heading ba title ta ei effect e dekhate chai ta hole ki korte hobe ?
jemon dhorun : ekhane jodi sudhu techtunes lekha take ei effect korte chai, ta hole ki korte hobe?
Thanks,
[email protected]
প্রথমে আপনি আপনার Text ইমেইজ টি বানিয়ে নেন । এরপর HTML কোড থেকে mehedi.png এর নাম পরিবর্তন করুন। এরপর CSS থেকে width, height এর ভেলু পরিবর্তন করুন।
.scrollBg {
background-image: url(pattern.jpg);
background-color: #000000;
width: 600px;
height: 300px;
}
আশা করি আর কোনো সমস্যা হবে না ।
ধন্যবাদ ।
চমৎকার,খুব চমৎকার লাগল।সম্পূর্ণ নতুন।অনেকেই বলে ফটোশপ মৃতকে জীবিত করতে পারে।কথাটা কি এমনিতে বলে!
মেহেদী ভাই ঠিক বলেছেন। এটা তো সিম্পল কিন্তু আরো অনেক ইফেক্ট আছে যা দেখে মাঝে মাঝে আমি নিযেও টাশকি খাই 😉
ধন্যবাদ
এস এম মেহেদী হাসান
ওয়েব ডিজাইনার ও ডেভেলপার
http://www.mehedi.com.bd
The Best You Can Find On WEB
মেহেদী ভাই আপনার জিনীসটা দেখে আমাকে আবার ভূতে পেল ।ভূতটা হল এটাকে gif বানানোর।আপনার ঐটার মত করে gif কিভাবে বানানো যায় সেটা বলেন কাইন্ডলি।
ভাই কামরুল আপনি ইচ্ছা করলেই বানাতে পারবেন । আপনি ফ্লাশ অথবা যেকোনো GIF বানানোর প্রোগ্রাম দিয়ে পেছনের ছবি মুভ করিয়ে করতে পারেন । আর উপরের ছবি Fixed রাখবেন । আশা করি কাজ করবে ।
আমি ইমেজ রেডিতে করে দেখেছি ঠিক আপনারটার মত হচ্ছেনা।হতে পারে আমি খুব এক্সপার্ট না এ জন্য।যদি আপনি ওঠার উপর একটা নতুন পোষ্ট করেন তাহলে মনেহয় আমার মত আরো অনেকে উপকৃত হত।আপনার পোষ্টের আশায় থাকলাম।
মেহেদী ভাই আপনার ফটোশপের গাইড লাইন ঠিক বুঝা গেল না। সুতরাং অনেক ভালো কিছুর মজা নিতে পারলাম না।
একটা কথা না বলে পারছি না- ইংরেজীতে ফটোশপের যে টিউটরিয়ালগুলো দেখি সেখানে এতো সুন্দর করে বলা থাকে যে নতুনরাও সহজে বুঝে নেয় কিন্তু বাংলায় যারা টিউটরিয়াল করেন তাদের কাছ থেকে সেভাবে ডিটেইলস পাই না।
এটা আমার ব্যক্তিগত অভিমত। কেউ কিছু মনে করবেন না প্লীজ।
ফটোশপ নিয়ে অনেক ট্রাই করলাম আপনার মত হল না, নিজের উপরি রাগ লাগছে আপনার কথা কেন বুঝতেছি না।এত সংখেপিত কথা না বুঝারই কথা, নতুন তো…
Joss …. Effect …