Supersized : সম্পূর্ণ ব্যাকগ্রাউন্ড/স্লাইডশো jQuery প্লাগিন

Standard

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

Supersized একটা jQuey প্লাগিন, যার মাধ্যমে আপনারা আপনাদের ছবির স্লাইডশো করতে পারবেন ইন্টারনেট ব্রাউজারের সম্পূর্ণ পর্দা জুড়ে।আসুন শুরুতে আমরা ডেমো দেখে নেই ।

Screenshot

ডেমো দেখার জন্য এখানে ক্লিক করুন

ডেমো ডাউনলোড করার জন্য এখানে ক্লিক করুন

Supersized প্লাগিন এর অপশন :

নিচে অপশগুলোর বর্ণণা করা হলো …

  • startwidth, startheight ছবির Ratio ক্যালকুলেশনের জন্য ব্যবহার করার হয় । এখানে আপনি আপনার সকল ছবি যে সাইজে আছে সেটা লিখবেন ।
  • vertical_center এর মান 1 হলে আপনার ছবিকে লম্বাভাবে মাঝখানে রাখবে, 0 হলে মাঝখানে রাখবে না ।
  • slideshow এর মান 1 হলে আপনার ছবিগুলোকে স্লাইডশো করবে, 0 হলে স্লাডশো করবে না ।
  • navigation এর মান 1 হলে আপনার কন্ট্রোল বাটন দেখাবে , 0 হলে দেখাবে না ।
  • transition এর মান 0 থেকে 5 পর্যন্ত পরিবর্তন করে আপনার স্লাইডশো এর ইফেক্ট পরিবর্তন করতে পারবেন ।
  • pause_hover এর মান 1 হলে মাউস ছবির উপর থাকলে স্লাইডশো থেমে যাবে ।
  • slide_counter এর মান 1 হলে স্লাইডশো দেখাবে ।
  • slide_caption এর মান 1 হলে স্লাইডশোতে নাম দেখাবে ।
  • slide_interval এর মান 3000 হলে স্লাইডশোতে ছবি ৩ সেকেন্ড পর পর পরিবর্তন হবে ।

আপনারা index.html ফাইলে এইসব অপশন এর মান পরিবর্তন করে আপনার স্লাইডশো কে নিজের মত করে সাজিয়ে নিতে পারবেন ।

আর ছবি পরিবর্তন করার জন্য index.html ফাইলের নিচের অংশ পরিবর্তন করুন ।

এখানে আপনি নতুন ছবি যোগ করতে চাইলে images ফোল্ডারে ছবি লোড করে উপরের কোডের ভেতরে নতুন ছবির লিংক যোগ করুন ।

আশা করি এই প্লাগিন দিয়ে আপনারা আপনাদের সাইটের ছবি দেখার পেজকে আরো সুন্দর করতে পারবেন ।

আপনাদের কোন সমস্যা হলে আমাকে জানাবেন ।

wow.js – মাউস স্ক্রলের সাথে অ্যানিমেশন

Standard

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

wow.js-logo

আসুন প্রথমেই ডেমো দেখি , এখানে ক্লিক করুন

ডাউনলোড করুন এখান থেকে

কিভাবে ব্যবহার করবেন দেখুন এখান থেকে

এই সাইটে বিস্তারিত ব্যবহার থাকার কারনে আমি আর বিস্তারিত লিখলাম না । আসা করি আপনারা এই প্লুগিন্স ব্যবহার করে আপনাদের সাইট আর সুন্দর করে বানাতে পারবেন ।

সিএসএস দিয়ে আপনার যেকোন ছবিকে বৃত্তাকার ছবি বানান

Standard

আজকাল সিএসএস ৩ ও জেকোয়ারি  ওয়েব ডিজাইনকে অনেক সহজ করে দিয়েছে, অনেক কিছু আগে আমাদের ফটশপে করতে হতো, এখন আমরা খুব সহজেই সিএসএস এ করতে পারি । আসুন আজ আমরা যেকোনো ছবি কে বৃত্তাকার ছবি বানাই শুধুমাত্র সিএসএস দিয়ে ।

আমরা ১# ছবি কে ২# ছবিতে রূপান্তর করবো

সিএসএস দিয়ে আপনার যেকোন ছবিকে বৃত্তাকার ছবি বানান

এইচটিএমএল

সিএসএস

ডেমো দেখার জন্য এখানে ক্লিক করুন