7/06/2015 11:15:00 AM
টিউনার রিদম এর ব্লগে আপনাদের সবাইকে স্বাগতম।
এই সিরিজটিতে আমি আপনাদের জেকোয়ারি বিখ্যাত সব প্লাগিন নিয়ে আলোচনা করব সাথে থাকুন।
আজকে আপনাদের সাথে আলোচনা করব মিক্সিটাপ প্লাগিন নিয়ে বিভিন্ন ওয়েব সাইটে ভিসিট করলে লক্ষ্য করবেন,Portfolio filer অপশনে গেলে কয়েকটি বিভাগ থাকে যেমন ওয়েব ডিজাইন,ওয়েব অ্যাপ্লিকেশান,ওয়ার্ডপ্রেস,মোবাইল অ্যাপ্লিকেশান ইত্যাদি তো এর মধ্যে থেকে ওয়েব ডিজাইনে ক্লিক করলে ওয়েব এর করা কাজ গুলো শো করে ওয়েব ডেভেলপমেন্ট এ ক্লিক করলে ওয়েব ডেভেলপমেন্ট এর করা কাজ গুলো শো করে তো এ কাজটি কিভাবে আমারা আমাদের ওয়েব সাইট এ করতে পারব তা আমার আজকের আলোচ্য বিষয়।
টিউনটি পড়ার আগে নিচের বিষয় গুলো সম্পর্কে বেশ ভালো ধারনা থাকতে হবে।
প্রথমে এই ওয়েব সাইট এ গিয়ে মিক্সিটাপ প্লাগিনটি ডাউনলোড করে নিন ,নিচের মত
এর পর ডাউনলোড হয়া শেষ হলে ফাইলটিকে এক্সট্রাট করুন । এর পর build নামে একটি ফোল্ডার আছে সেখানে jquery.mixitup.min.js নামে একটি Js ফাইল আছে সেটি আপনার টেমপ্লেটের Js নামক ফোল্ডারে কপি করে পেস্ট করুন ।
আমার টেম্পলেটাতে যাযা রয়েছে
ইনডেক্স ডট এইচটিএমএল ফাইল
শুধু মাত্র ইনডেক্স ডট এইচটিএমএলে টুইটার-বুটট্র্যাপ কল করা আছে আর লেটেস্ট জেকুউরি কল আছে আর সিএসএস আর ফন্ট আর ইমেজ নামে তিনটি ফোল্ডার আছে এবং ইমেজ ফোল্ডারের ভিতরে ১৫টি ছবি আছে একই সাইজের এ ছাড়া আর কিছুই নেই, কারন আমি বেশি কন্টেন্ট রাখি নেই আপনাদের বুঝার সুবিধার জন্য,এইটি ভালো ভাবে বুঝতে পারলে যেকোন টেম্পলেটে আপনার মিক্সিটাপ যুক্ত করতে পারবেন।
এবার আসি মূল আলোচনায়
build নামে একটি ফোল্ডার থেকে কপি করা jquery.mixitup.min.js নামে একটি Js ফাইলটি Js নামক ফোল্ডারে রাখার পর এবার এইটিকে আমাদের টেম্পলতে কল করা হবে নিচের মত,footer এ জেকুউরি কল করলাম কারন প্রথমে পেজ লোড হবে এর পর প্লাগিন লোড হবে এতে করে সাইট ফাস্ট থাকবে মানে বুঝাতে চেয়েছি একজন উজার যখন ওয়েব সাইটে ভিসিট করবে প্রথমে ওয়েব সাইটি লোড হয়ে কিছু অংশ তার সামনে প্রদর্শিত হবে এর পর ফুটারে গিয়ে জেকুউরি গুলো লোড হবে । তাই সব সময় ফুটারে জেকুউরি ব্যাবহার করার চেষ্টা করবেন । তবে কিছু কিছু জেকুউরি প্লাগিন আছে যা হেডারে কল করতে হয় যেমন : প্রিলোডার আমি অন্য একটি টিউনে এইটি নিয়ে লিখব ।
এর পর আমি একটি Div নিয়েছি যার নাম দিয়েছি mixitup-Filter-menu এর পর Ul এর ক্লাস দিয়েছি Filter এর পর আমার যতটি লিস্ট আইটেম দরকার ততটি নিয়েছি আর আপনারা Ul li এর পর a দিবেন না তাহলে কিন্তু কাজ করবে না ।আমরা সব সচরাচর Ul li a নিয়ে থাকি তবে এইটি যেহেতু লিস্ট আকারে থাকবে কোন প্রকার লিংক হবে না । Data filter এ যে নাম থাকবে আপনার লিস্ট আইটেমে একি নাম হতে হবে,শুধু একটি ছোট পরিবর্তন হবে তা হল Data -Filter এ ক্লাস এর আগে একটি করে ডট সাইন বসবে । { All এর আগে ডট দিবেন না } আর লিস্ট আইটেমে আপনি যে কোনো নাম দিতে পারেন যেমন আমি কিছু কার্টুন চরিত্রের নাম দিয়েছি।এবং ইউজার যে কার্টুন চরিত্রে ক্লিক করবে তার ছবি শো করবে ।
{ বিঃদ্রঃ Filter এবং Data-Filter এই দুটি মিক্সিটাপ এর ক্লাস এইদুটি আপনি নিজের মত করে লিখতে পারবে না আপনাকে নিচের মত করে লিখতে হবে । }
আউট -পুট
এর পর ওপরের ডিভ এর পর আরও একটি ডিভ নিন ,এর পর আপনার পছন্দ মত ক্লাস এর নাম দিন, ডিভ এর ভিতরে আমরা লিস্ট আইটেম এর কন্টেন্ট দিব,ওপরের ছবিটি লক্ষ্য করুন সেখানে spider-man, mickey-mouse Tom-And-Gerry এ নামে কয়েকটি লিস্ট আছে,তো আমাদের গোল হচ্ছে উজার যখন Tom-and-Gerry তে ক্লিক করবে তখন Tom -And-Gerry এর ছবি উজার এর কাছে শো করবে শুধু তাই নয় spider-man, mickey-mouse উজার যে আইটেম এ ক্লিক করুক না কেন তার ছবি শো করবে,কারন উজার তো শুধু Tom-and-Gerry তে ক্লিক করবে না সে ওপরের দেয়া যেকোন আইটেমে ক্লিক করতে পারে । তো এই কাজটি করার জন্য নিচের মত কোডিং করে ফেলুন ।
এর পর আপনি যে কয়টি আইটেমের কন্টেন্ট দেখাতে চান ততটি কপি করে পেস্ট করুন,যেমন আমি চাইছি Tom-and-Gerry, spider- man, mickey-mouse,doremon প্রত্যেকটির ৩ টি করে ইমেজ উজার এর সামনে প্রদর্শিত হবে । কোড এর আউটপুটটি হবে এই রকম ।
আচ্ছা এবার আপনাদের কোডটা বুঝিয়ে দি কিভাবে আমি কোডটি লিখেছি ,আশা করছি ১ নং ডিভ এর কাজ টা আপনারা বুজেছেন ,তো সেটি আর বলতে চাচ্ছি না , দ্বিতীয় নাম্বার ডিভে আমি menu-list-items নামে একটি ক্লাস নিয়েছি আপনি আপনার মনের মত যে কোন একটি ডিভ নিতে পারেন সমস্যা নেই । এর তার ভিতরে <div class="mix tom-and-jerry mixitup-images" > তো এইখানে mix ক্লাসটি মি নিজে থেকে দিনেই এটা মিক্সিটাপ এর ক্লাস এটা আপনাকে অবশই দিতে হবে । এর পর আমি দিয়েছি ক্যাটাগরি নেম Tom-And-Jerry আর এখানে আপনি ভুলেও ১ নং ডিভ এর মত ক্যাটাগরি নেম {.Tom-And-Gerry} এর আগে ডট দিবেন না,দিয়ে থাকলে কিন্তু কাজ করবে না ,এর পর আমরা আমাদের নিজেদের একটি ক্লাস দিয়েছি সিএসএস দিয়ে স্টাইল করার জন্য { mixitup-image } নামে ।এর পর আছে data-my-order="1" এইটি ও মিক্সিটাপ এর ক্লাস এইটিও আপনাকে ব্যাবহার করতে হবে । যায় হোক আশা করছি বুঝাতে পেরেছি ।
এর পর আউট পুট আসবে
এর পর একটি সিএসএস ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা সিএসএস ফাইলটিতে
কোডটিতে লক্ষ্য করুন DIV No 2 এর যে ক্লাসটি ব্যাবহার করা হয়েছে সেটি এইখানে কল করা হয়েছে,কোডটিতে বলা হয়েছে .menu-list-items এর ভিতরের ক্লাস mix কে ডিসপ্লে none করুন ।
এর পর একটি জাভাস্ক্রিপ্ট ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা জাভাস্ক্রিপ্ট ফাইলটিতে
এইখানে আপনার DIV No 2 এর যে ক্লাসটি ব্যাবহার করা হয়েছে সেটি এইখানে কল করা দিন তাহলে আপনার মিক্সিটাপটি কাজ করবে ।
আউট পুট
তো আমরা দেখতে পাচ্ছি এইটি কাজ করছে ঠিক কিনতু দেখতে ভালো লাগছে না তাই আমি নিজের মত স্টাইল করে নিলাম আশা করছি আপনারা নিজেরা নিজেদের মত এইটি স্টাইল করে নিতে পারবেন ।
আউট পুট
কাজ প্রায় শেষ আপনারা চাইলে আরও নিত্য নতুন Effect যুক্ত করতে পারেন
তো সেটি করার জন্য আপনার জাভাস্ক্রিপ্ট ফাইলটি ওপেন করুন যে রকম আছে সে রকম থাকবে জাস্ট .mixItUp এর ভিতরে সেকেন্ড বন্ধনী এর ভিতরে Animation এর পর Effects এর বিভিন্ন নাম দিন নীচের কোডিংটি দেখুন
এইগুলো Animation এর Effect try করে দেখতে পারেন
fade
scale
translateX
translateY
translateZ
rotateX
rotateY
rotateZ
stagger
সোর্স ফাইল গুলো ডাউনলোড করে দেখুন
আর এই লিঙ্ক গুলো দেখতে পারেন ।
১. https://mixitup.kunkalabs.com/docs/#prop-animation-effects
২. https://github.com/patrickkunka/mixitup
ধন্যবাদ সবাইকে টিউনটি পড়ার জন্য।
আমার আপডেট টিউন গুলো সবার আগে ইমেল এ পেতে আপনারা ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুন : টিউনার»রিদম দত্ত
এই সিরিজটিতে আমি আপনাদের জেকোয়ারি বিখ্যাত সব প্লাগিন নিয়ে আলোচনা করব সাথে থাকুন।
আজকে আপনাদের সাথে আলোচনা করব মিক্সিটাপ প্লাগিন নিয়ে বিভিন্ন ওয়েব সাইটে ভিসিট করলে লক্ষ্য করবেন,Portfolio filer অপশনে গেলে কয়েকটি বিভাগ থাকে যেমন ওয়েব ডিজাইন,ওয়েব অ্যাপ্লিকেশান,ওয়ার্ডপ্রেস,মোবাইল অ্যাপ্লিকেশান ইত্যাদি তো এর মধ্যে থেকে ওয়েব ডিজাইনে ক্লিক করলে ওয়েব এর করা কাজ গুলো শো করে ওয়েব ডেভেলপমেন্ট এ ক্লিক করলে ওয়েব ডেভেলপমেন্ট এর করা কাজ গুলো শো করে তো এ কাজটি কিভাবে আমারা আমাদের ওয়েব সাইট এ করতে পারব তা আমার আজকের আলোচ্য বিষয়।
টিউনটি পড়ার আগে নিচের বিষয় গুলো সম্পর্কে বেশ ভালো ধারনা থাকতে হবে।
- এইচটিএমএল
- সিএসএস
- জাভাস্ক্রিপ্ট {বেসিক জানলেও চলবে তবে না জানলে ও সমস্যা নেই ,টিউনটি দেখতে পারবেন }
- জেকুউরি
- জেকুউরি ইউ আই { না জানলে ও সমস্যা নেই ,টিউনটি দেখতে পারবেন, জানা থাকলে ভাল আরকি }
- টুইটার বুটস্ত্রাপ
প্রথমে এই ওয়েব সাইট এ গিয়ে মিক্সিটাপ প্লাগিনটি ডাউনলোড করে নিন ,নিচের মত
এর পর ডাউনলোড হয়া শেষ হলে ফাইলটিকে এক্সট্রাট করুন । এর পর build নামে একটি ফোল্ডার আছে সেখানে jquery.mixitup.min.js নামে একটি Js ফাইল আছে সেটি আপনার টেমপ্লেটের Js নামক ফোল্ডারে কপি করে পেস্ট করুন ।
আমার টেম্পলেটাতে যাযা রয়েছে
ইনডেক্স ডট এইচটিএমএল ফাইল
শুধু মাত্র ইনডেক্স ডট এইচটিএমএলে টুইটার-বুটট্র্যাপ কল করা আছে আর লেটেস্ট জেকুউরি কল আছে আর সিএসএস আর ফন্ট আর ইমেজ নামে তিনটি ফোল্ডার আছে এবং ইমেজ ফোল্ডারের ভিতরে ১৫টি ছবি আছে একই সাইজের এ ছাড়া আর কিছুই নেই, কারন আমি বেশি কন্টেন্ট রাখি নেই আপনাদের বুঝার সুবিধার জন্য,এইটি ভালো ভাবে বুঝতে পারলে যেকোন টেম্পলেটে আপনার মিক্সিটাপ যুক্ত করতে পারবেন।
{ আপনারা মিক্সিটাপে ইমেজ ব্যবহার করার আগে সব ইমেজ একই সাইজ এর করে নিবেন Roit নামক সফটওয়্যার এর সাহায্যে। }
এবার আসি মূল আলোচনায়
build নামে একটি ফোল্ডার থেকে কপি করা jquery.mixitup.min.js নামে একটি Js ফাইলটি Js নামক ফোল্ডারে রাখার পর এবার এইটিকে আমাদের টেম্পলতে কল করা হবে নিচের মত,footer এ জেকুউরি কল করলাম কারন প্রথমে পেজ লোড হবে এর পর প্লাগিন লোড হবে এতে করে সাইট ফাস্ট থাকবে মানে বুঝাতে চেয়েছি একজন উজার যখন ওয়েব সাইটে ভিসিট করবে প্রথমে ওয়েব সাইটি লোড হয়ে কিছু অংশ তার সামনে প্রদর্শিত হবে এর পর ফুটারে গিয়ে জেকুউরি গুলো লোড হবে । তাই সব সময় ফুটারে জেকুউরি ব্যাবহার করার চেষ্টা করবেন । তবে কিছু কিছু জেকুউরি প্লাগিন আছে যা হেডারে কল করতে হয় যেমন : প্রিলোডার আমি অন্য একটি টিউনে এইটি নিয়ে লিখব ।
এর পর আমি একটি Div নিয়েছি যার নাম দিয়েছি mixitup-Filter-menu এর পর Ul এর ক্লাস দিয়েছি Filter এর পর আমার যতটি লিস্ট আইটেম দরকার ততটি নিয়েছি আর আপনারা Ul li এর পর a দিবেন না তাহলে কিন্তু কাজ করবে না ।আমরা সব সচরাচর Ul li a নিয়ে থাকি তবে এইটি যেহেতু লিস্ট আকারে থাকবে কোন প্রকার লিংক হবে না । Data filter এ যে নাম থাকবে আপনার লিস্ট আইটেমে একি নাম হতে হবে,শুধু একটি ছোট পরিবর্তন হবে তা হল Data -Filter এ ক্লাস এর আগে একটি করে ডট সাইন বসবে । { All এর আগে ডট দিবেন না } আর লিস্ট আইটেমে আপনি যে কোনো নাম দিতে পারেন যেমন আমি কিছু কার্টুন চরিত্রের নাম দিয়েছি।এবং ইউজার যে কার্টুন চরিত্রে ক্লিক করবে তার ছবি শো করবে ।
{ বিঃদ্রঃ Filter এবং Data-Filter এই দুটি মিক্সিটাপ এর ক্লাস এইদুটি আপনি নিজের মত করে লিখতে পারবে না আপনাকে নিচের মত করে লিখতে হবে । }
আউট -পুট
এর পর ওপরের ডিভ এর পর আরও একটি ডিভ নিন ,এর পর আপনার পছন্দ মত ক্লাস এর নাম দিন, ডিভ এর ভিতরে আমরা লিস্ট আইটেম এর কন্টেন্ট দিব,ওপরের ছবিটি লক্ষ্য করুন সেখানে spider-man, mickey-mouse Tom-And-Gerry এ নামে কয়েকটি লিস্ট আছে,তো আমাদের গোল হচ্ছে উজার যখন Tom-and-Gerry তে ক্লিক করবে তখন Tom -And-Gerry এর ছবি উজার এর কাছে শো করবে শুধু তাই নয় spider-man, mickey-mouse উজার যে আইটেম এ ক্লিক করুক না কেন তার ছবি শো করবে,কারন উজার তো শুধু Tom-and-Gerry তে ক্লিক করবে না সে ওপরের দেয়া যেকোন আইটেমে ক্লিক করতে পারে । তো এই কাজটি করার জন্য নিচের মত কোডিং করে ফেলুন ।
এর পর আপনি যে কয়টি আইটেমের কন্টেন্ট দেখাতে চান ততটি কপি করে পেস্ট করুন,যেমন আমি চাইছি Tom-and-Gerry, spider- man, mickey-mouse,doremon প্রত্যেকটির ৩ টি করে ইমেজ উজার এর সামনে প্রদর্শিত হবে । কোড এর আউটপুটটি হবে এই রকম ।
আচ্ছা এবার আপনাদের কোডটা বুঝিয়ে দি কিভাবে আমি কোডটি লিখেছি ,আশা করছি ১ নং ডিভ এর কাজ টা আপনারা বুজেছেন ,তো সেটি আর বলতে চাচ্ছি না , দ্বিতীয় নাম্বার ডিভে আমি menu-list-items নামে একটি ক্লাস নিয়েছি আপনি আপনার মনের মত যে কোন একটি ডিভ নিতে পারেন সমস্যা নেই । এর তার ভিতরে <div class="mix tom-and-jerry mixitup-images" > তো এইখানে mix ক্লাসটি মি নিজে থেকে দিনেই এটা মিক্সিটাপ এর ক্লাস এটা আপনাকে অবশই দিতে হবে । এর পর আমি দিয়েছি ক্যাটাগরি নেম Tom-And-Jerry আর এখানে আপনি ভুলেও ১ নং ডিভ এর মত ক্যাটাগরি নেম {.Tom-And-Gerry} এর আগে ডট দিবেন না,দিয়ে থাকলে কিন্তু কাজ করবে না ,এর পর আমরা আমাদের নিজেদের একটি ক্লাস দিয়েছি সিএসএস দিয়ে স্টাইল করার জন্য { mixitup-image } নামে ।এর পর আছে data-my-order="1" এইটি ও মিক্সিটাপ এর ক্লাস এইটিও আপনাকে ব্যাবহার করতে হবে । যায় হোক আশা করছি বুঝাতে পেরেছি ।
এর পর আউট পুট আসবে
এর পর একটি সিএসএস ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা সিএসএস ফাইলটিতে
কোডটিতে লক্ষ্য করুন DIV No 2 এর যে ক্লাসটি ব্যাবহার করা হয়েছে সেটি এইখানে কল করা হয়েছে,কোডটিতে বলা হয়েছে .menu-list-items এর ভিতরের ক্লাস mix কে ডিসপ্লে none করুন ।
এর পর একটি জাভাস্ক্রিপ্ট ফাইল খুলুন অ্যান্ড আপনার ইনডেক্স.এইচটিএমএলে কল করান এর পর নিচের মত কোড লিখে ফেলুন আপনার সদ্য খুলা জাভাস্ক্রিপ্ট ফাইলটিতে
এইখানে আপনার DIV No 2 এর যে ক্লাসটি ব্যাবহার করা হয়েছে সেটি এইখানে কল করা দিন তাহলে আপনার মিক্সিটাপটি কাজ করবে ।
আউট পুট
তো আমরা দেখতে পাচ্ছি এইটি কাজ করছে ঠিক কিনতু দেখতে ভালো লাগছে না তাই আমি নিজের মত স্টাইল করে নিলাম আশা করছি আপনারা নিজেরা নিজেদের মত এইটি স্টাইল করে নিতে পারবেন ।
আউট পুট
কাজ প্রায় শেষ আপনারা চাইলে আরও নিত্য নতুন Effect যুক্ত করতে পারেন
তো সেটি করার জন্য আপনার জাভাস্ক্রিপ্ট ফাইলটি ওপেন করুন যে রকম আছে সে রকম থাকবে জাস্ট .mixItUp এর ভিতরে সেকেন্ড বন্ধনী এর ভিতরে Animation এর পর Effects এর বিভিন্ন নাম দিন নীচের কোডিংটি দেখুন
এইগুলো Animation এর Effect try করে দেখতে পারেন
fade
scale
translateX
translateY
translateZ
rotateX
rotateY
rotateZ
stagger
সোর্স ফাইল গুলো ডাউনলোড করে দেখুন
আর এই লিঙ্ক গুলো দেখতে পারেন ।
১. https://mixitup.kunkalabs.com/docs/#prop-animation-effects
২. https://github.com/patrickkunka/mixitup
ধন্যবাদ সবাইকে টিউনটি পড়ার জন্য।
আমার আপডেট টিউন গুলো সবার আগে ইমেল এ পেতে আপনারা ক্লিক করুন এবং ইমেইল দিয়ে ভেরিফাই করুন : টিউনার»রিদম দত্ত
বিভিন্ন সোসিয়াল সাইট এ আমাকে খুজে পেতে নিচের আইকন গুলোতে ক্লিক করুন।
বিঃদ্রঃ আমার অনুমতি ছাড়া আমার ব্লগ এর পোস্ট অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ নাম উল্লেখ করে দিবেন।
আমার সকল পোস্ট পড়তে নিচের ইমেজটিতে ক্লিক করুন
0 মন্তব্য(গুলি):
প্রিয় পাঠক, পোস্টটি পড়ার পর আপনার কেমন লেগেছে ভালো নাকি মন্দ জিজ্ঞাসা কিংবা পরামর্শ প্রদানের জন্য মন্তব্য প্রদান করুন। যা আমাকে ব্লগিং চালিয়ে যেতে অনেক উৎসাহ-অনুপ্রেরণা জাগাবে। আপনার একটি মন্তব্যই আমার কাছে অনেক মূল্যবান। ধন্যবাদ।