বিশ্বের প্রথম সবচেয়ে বড় বাংলা  টেকনোলজি সৌশাল নেটওয়ার্ক – টেকটিউনসে আপনাদের সবাইকে স্বাগতম জানাচ্ছি আমি টেকটিউনার রিদম দত্ত। সামনে আসছে টেকটিউনস ট্রিনিটি  বা টেকটিনস থ্রি পয়েন্ট নিত্য নতুন কলাবেরশন নিয়ে ৩ কোটি + প্রযুক্তি প্রেমি দেখবে এক  অন্য রকম টেকটিউনসকে আশা করছি সবাই টেকটিউনস এর সাথে থাকবেন।

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

আজকে আপনাদের সাথে আলোচনা করব মিক্সিটাপ প্লাগিন নিয়ে বিভিন্ন ওয়েব  সাইটে ভিসিট করলে লক্ষ্য করবেন,Portfolio filter  অপশনে গেলে কয়েকটি বিভাগ থাকে যেমন ওয়েব ডিজাইন,ওয়েব অ্যাপ্লিকেশান,ওয়ার্ডপ্রেস,মোবাইল অ্যাপ্লিকেশান ইত্যাদি তো এর মধ্যে  থেকে ওয়েব ডিজাইনে ক্লিক করলে ওয়েব এর করা কাজ গুলো শো করে ওয়েব ডেভেলপমেন্ট এ ক্লিক করলে ওয়েব ডেভেলপমেন্ট এর করা কাজ গুলো শো করে তো এ কাজটি কিভাবে আমারা আমাদের ওয়েব সাইট এ করতে পারব তা আমার আজকের  আলোচ্য বিষয়।

টিউনটি পড়ার আগে নিচের বিষয় গুলো সম্পর্কে বেশ ভালো ধারনা থাকতে হবে

• এইচটিএমএল
• সিএসএস
• জাভাস্ক্রিপ্ট  {বেসিক জানলেও চলবে তবে না জানলে ও সমস্যা নেই,টিউনটি দেখতে পারবেন }
• জেকুউরি
• জেকুউরি ইউ আই { না জানলে ও সমস্যা নেই,টিউনটি দেখতে পারবেন, জানা থাকলে ভাল আরকি }
• টুইটার বুটস্ত্রাপ

প্রথমে এই ওয়েব সাইট এ গিয়ে মিক্সিটাপ প্লাগিনটি ডাউনলোড করে নিন,নিচের মত

এর পর ডাউনলোড হয়া শেষ হলে ফাইলটিকে এক্সট্রাট করুন। এর পর 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

এই টিউনটি আগে আমার এ ব্লগ এ  প্রকাশ হয়েছে।

আমার আপডেট টিউন গুলো সবার আগে ইমেল এ পেতে আপনারা ক্লিক করুন  এবং ইমেইল দিয়ে ভেরিফাই করুন : টেকটিউনস টিউনার»রিদম দত্ত

বিভিন্ন সোসিয়াল  সাইট এ আমাকে খুজে পেতে নিচের আইকন গুলোতে ক্লিক করুন

 

বিঃদ্রঃ আমার অনুমতি ছাড়া আমার ব্লগ ও টেকটিউনস এর টিউন অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ ও টেকটিউনস এর নাম উল্লেখ করে দিবেন।

---

আমার সকল টিউন পড়তে  নিচের ইমেজটিতে ক্লিক করুন