Quantcast
ADs by Techtunes tAds
ADs by Techtunes tAds

jQuery দিয়ে লিখার পেছনে চলমান ছবি

যারা ওয়েব ডিজাইনিং ও ডেভেলপিং করেন তারা jQuery এর সাথে পরিচিত। jQuery আমাদের বর্তমান সময়ের একটা প্রয়োজনীয় জাভা স্ক্রীপ্ট লাইব্রেরী। আসুন আজ আমরা jQuery ব্যবহার করে যেকোন লিখার পেছনের ব্যাকগ্রাউন্ডকে চলমান করবো।

ADs by Techtunes tAds

এই কাজের জন্য আমাদের যা যা করতে হবে, তা হলো

  • একটি ছবি যেটার মধ্যে কিছু গর্ত করা লিখা থাকবে। নিচে আমি আলোচনা করবো কি করে ছবি টা বানাবেন।
  • এরপর jQuery এর কোড ব্যবহার করে আমরা একটা HTML ফাইল বানাবো যেখানে লিখার পেছনে চলমান ছবি দেখতে পাবো।

এবার আসুন Photoshop দিয়ে আমরা একটা ছবি বানাবো।

প্রথমে Photoshop রান করে নিউ একটা ইমেজ নেন।

এরপর বামের প্যানেল থেকে একটা চারকোনা কালো Shape নেন। এরপর আপনি যে লিখা বানাতে চান সেটা বামের প্যানেল থেকে Text নিয়ে লিখুন।

এবার বামের প্যানেল থেকে Layer এ গিয়ে আপনার লিখার Layer এ CTRL + ক্লিক করে সিলেক্ট করুন।

ADs by Techtunes tAds

এবার Select মেনু থেকে Inverse এ ক্লিক করুন।

ক্লিক করলে নিচের মত দেখতে পাবেন

এবার Layer থেকে Shape Layer কে সিলেক্ট করে Mask এ ক্লিক করুন

এবার Background ও লিখার Layer গুলোকে Hide করে দিন (Layer এ যে চোখের মত ছোট ছবি আছে সেখানে ক্লিক করুন)। এবার নিচের মত দেখতে পাবেন

এবার File Menu থেকে Save As দিয়ে ছবিটাকে PNG ফরমাটে সেভ করুন।

এবার আমরা HTML ফাইল বানাবো এবং jQuery ব্যবহার করে

আমাদের বানানো লিখার নিচে একটা চলমান ছবি ব্যবহার করবো।

ADs by Techtunes tAds

এবার নিচের 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 এর ধাপগুলো সংক্ষেপে দিয়েছি। আপনাদের সুবিধার জন্য সম্পূর্ণ প্রোজেক্টের ডাউনলোড লিংক দেয়া হলো। আপনারা ডাউনলোড করে উপভোগ করতে পারেন।

সম্পূর্ণ প্রোজেক্টের ডাউনলোড লিংক।

অজানা ইনফরমেশন

সম্প্রতিকালের অজানা ইনফরমেশন…

আমার টিউন গুলো ভালো লাগলে অবশ্যই আমার টিউন বেশি বেশি জোসস করুন

আমার টিউন গুলো আপনার 'টিউন স্ক্রিন' নিয়মিত পেতে অবশ্যই আমাকে ফলো করুন। আমার টিউন গুলো সবার কাছে ছড়িতে দিতে অবশ্যই আমার টিউন গুলো বিভিন্ন সৌশল মিডিয়াতে বেশি বেশি শেয়ার করুন

আমার টিউন সম্পর্কে আপনার যে কোন মতামত, পরামর্শ ও আলোচনা করতে অবশ্যই আমার টিউনে টিউমেন্ট করুন

আমার সাথে সরাসরি যোগাযোগ করার জন্য 'টেকটিউনস ম্যাসেঞ্জারে' আমাকে ম্যাসেজ করুন। আমার সকল টিউন পেতে ভিজিট করুন আমার 'টিউনার পেইজ'

ADs by Techtunes tAds

আমি মেহেদী.কম.বিডি। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 8 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 34 টি টিউন ও 280 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Joss …. Effect …

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,
onlybps@gmail.com

    প্রথমে আপনি আপনার 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 রাখবেন । আশা করি কাজ করবে ।

আমি ইমেজ রেডিতে করে দেখেছি ঠিক আপনারটার মত হচ্ছেনা।হতে পারে আমি খুব এক্সপার্ট না এ জন্য।যদি আপনি ওঠার উপর একটা নতুন পোষ্ট করেন তাহলে মনেহয় আমার মত আরো অনেকে উপকৃত হত।আপনার পোষ্টের আশায় থাকলাম।

মেহেদী ভাই আপনার ফটোশপের গাইড লাইন ঠিক বুঝা গেল না। সুতরাং অনেক ভালো কিছুর মজা নিতে পারলাম না।
একটা কথা না বলে পারছি না- ইংরেজীতে ফটোশপের যে টিউটরিয়ালগুলো দেখি সেখানে এতো সুন্দর করে বলা থাকে যে নতুনরাও সহজে বুঝে নেয় কিন্তু বাংলায় যারা টিউটরিয়াল করেন তাদের কাছ থেকে সেভাবে ডিটেইলস পাই না।
এটা আমার ব্যক্তিগত অভিমত। কেউ কিছু মনে করবেন না প্লীজ।

ফটোশপ নিয়ে অনেক ট্রাই করলাম আপনার মত হল না, নিজের উপরি রাগ লাগছে আপনার কথা কেন বুঝতেছি না।এত সংখেপিত কথা না বুঝারই কথা, নতুন তো…