মোশনে, প্যারালাক্স বলতে বোঝায় কোনো বস্তুর অবস্থান পরিবর্তন করা কোনো পটভূমির বিপরীতে অবস্থানকারী কোনো পর্যবেক্ষকের সাপেক্ষে। এই শব্দটি ইন্টারনেটে জনপ্রিয়তা পেয়েছে। বিশেষত, সাইটটি আকর্ষণীয় দেখায়, যার নকশায় গতিশীল উপাদান রয়েছে। প্যারালাক্স হল একটি ওয়েব পেজ ডিজাইন কৌশল যা ওয়েবমাস্টারদের দ্বারা প্রচুর সংখ্যক দর্শকদের আকৃষ্ট করার জন্য ব্যবহৃত হয়৷
লম্বন কাকে বলে
প্যারালাক্স স্ক্রলিং উল্লম্বভাবে পাশাপাশি সরল রেখায় ব্যবহার করা যেতে পারে। নিন্টেন্ডো সেরা উদাহরণ। আমাদের মধ্যে অনেকেই নস্টালজিয়া কম্পিউটার গেমের সাথে মনে রাখে, যা পর্দার বাম দিক থেকে ডানদিকে প্রধান চরিত্রগুলির আন্দোলন দ্বারা প্রতিনিধিত্ব করে। এটি নীচে সরানোও সম্ভব, একটি উল্লম্বভাবে অবস্থিত সরলরেখা বরাবর বাহিত। ওয়েবে প্যারালাক্স প্রভাব প্রায়ই ব্যবহৃত হয়। আপনি একটি উল্লম্ব স্লাইডার 3 তৈরি করতে JavaScript বা CSS ব্যবহার করতে পারেন।
বর্ণিত ত্রিমাত্রিক স্থানিক প্রভাব তাদের বৈশিষ্ট্য মাত্র। গেমের নির্মাতারা বেশ কয়েকটি ব্যাকগ্রাউন্ড লেয়ার ব্যবহার করেছেন। তারা টেক্সচার ভিন্ন, যখন আন্দোলন বিভিন্ন সঙ্গে বাহিত হয়গতি।
মনে করবেন না যে প্যারালাক্স শুধুমাত্র একটি 3D প্রভাব৷ পৃষ্ঠায়, আপনি বিদ্যমান আইকনগুলি সরাতে পারেন। তাছাড়া, এটি বেশ আকর্ষণীয় দেখায়। একটি বিশেষভাবে ভাল বিকল্প হল তাদের প্রত্যেকের জন্য একটি পৃথক গতিপথ ব্যবহার করা। এই ক্ষেত্রে, বিভিন্ন আইকন ব্যবহার করা হয়, বিভিন্ন ট্র্যাজেক্টরি বরাবর চলন্ত। এই নকশা মনোযোগ আকর্ষণ করে।
ছবিতে প্রাণ আসে
ছবি ছাড়া একটি সাইট খুঁজে পাওয়া কঠিন৷ উচ্চ-মানের এবং প্রদর্শনমূলক অঙ্কন দর্শকদের আকর্ষণ করে। তবে সবচেয়ে বেশি মনোযোগ আকর্ষণ করা হয় বিভিন্ন ধরণের গতিশীল চিত্রের প্রতি। প্রকৃতপক্ষে, যদি একটি সাইট পরিদর্শন করার সময় আন্দোলন হয়, তাহলে এটি মনোযোগ আকর্ষণ করে। উল্লেখযোগ্যভাবে একটি গতিশীল ইমেজ একটি সম্পদ ফিরে একটি দর্শক সম্ভাবনা বৃদ্ধি. নড়াচড়া মনে হলো নাকি? অতএব, সাইটে দর্শকদের আকৃষ্ট করার জন্য, প্যারালাক্স প্রভাবের মতো একটি জিনিস অধ্যয়ন করা মূল্যবান৷
মুভিং ইমেজ সাইটের উদাহরণ:
- hvorostovsky.com;
- www.kagisointeractive.com.
যেমন উদাহরণগুলিতে দেখানো হয়েছে, অভিজ্ঞতাটি ড্রপ-ডাউন মেনু দ্বারা উপ-আইটেমগুলিতে উন্নত করা হয়েছে। এই ধরনের উপাদান দর্শকদের জন্য সময় বাঁচায়, তাই এটি তাদের কাছে আকর্ষণীয়৷
jQuery লাইব্রেরি
jQueryParallax শব্দটি একই নামের লাইব্রেরীকে সংজ্ঞায়িত করে। এটির জন্য ধন্যবাদ, 3D বিন্যাসে আন্দোলনের প্রভাব অর্জন করা সহজ। jQuery লাইব্রেরিতে, 3D উপলব্ধি বিভিন্ন উপায়ে তৈরি করা হয়। তাদের মধ্যে একটি সঙ্গে পটভূমি বস্তুর অনুভূমিক যুগপত আন্দোলন গঠিতভিন্ন গতি। এই লাইব্রেরিটি প্রচুর পরিমাণে বিভিন্ন ধরণের বৈশিষ্ট্যের উপস্থিতি দ্বারা চিহ্নিত করা হয়। এবং এখানে বর্ণিত স্থানচ্যুতিটি এর ক্ষমতার একটি ছোট অংশ মাত্র।
সাইটটি বেশ আকর্ষণীয় দেখায়, যা তৈরির জন্য বিভিন্ন আধুনিক উপাদান ব্যবহার করা হয়েছিল। তার মধ্যে একটি প্যারালাক্স। উদাহরণ সাইটের মত দেখতে হতে পারে:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallax মাউসের সাহায্যে নড়াচড়া করা স্তর দ্বারা প্রতিনিধিত্ব করা হয়। গতিশীল উপাদানগুলি পরম অবস্থান দ্বারা চিহ্নিত করা হয় (অবস্থান: পরম;)। তাদের প্রতিটি একটি পৃথক গতিতে তার নিজস্ব আকার এবং আন্দোলন দ্বারা চিহ্নিত করা হয়। এটি পাঠ্য বা একটি চিত্র হতে পারে (সম্পদ নির্মাতাদের অনুরোধে)।
সাইট ভিজিটরের উপলব্ধি
এর পরে, একজন ব্যক্তি সাধারণত এই বিষয়টিতে মনোযোগ দেন যে পৃষ্ঠাটি উচ্চ মানের, সুবিধাজনক এবং জ্ঞানের সাথে ডিজাইন করা হয়েছে। এই সত্যটি সাধারণত সম্মান করা হয়। এটি ঘটে যে অন্যান্য উপাদানগুলি চেষ্টা করার জন্য কৌতূহল দেখা দেয়। ইন্টারনেটে প্রচুর সংখ্যক অভিন্ন সাইট রয়েছে। কিভাবে আপনার সম্পদকে বিশেষ করে তুলবেন?
আপনি যদি ডিজাইনটি পছন্দ করেন তবে দর্শক আরও দীর্ঘ সময়ের জন্য থাকবেন। এইভাবে, পোস্ট করা তথ্য দ্বারা তার আকৃষ্ট হওয়ার সম্ভাবনা বৃদ্ধি পায়, সে আগ্রহ দেখাবে। ফলস্বরূপ, একজন ব্যক্তি প্রস্তাবিত পরিষেবা, পণ্য বা প্রচারমূলক অফার ব্যবহার করবেন৷
প্রিয় পুরনো গেম
"লম্বন" ধারণাটি সবার কাছে পরিচিত হওয়া উচিত80 এবং 90 এর দশকের কনসোল ভক্তদের। এটি গেমের ক্ষেত্রে প্রযোজ্য:
- মারিও ব্রোস
- মর্টাল কম্ব্যাট।
- রাগের রাস্তা।
- চাঁদের টহল।
- সময়ে কচ্ছপ।
অর্থাৎ, প্যারালাক্স এমন একটি কৌশল যা বেশ দীর্ঘ সময় ধরে ব্যবহৃত হয়ে আসছে। এই গেমগুলি সত্যিই কিছু নস্টালজিয়া সঙ্গে স্মরণ করা হয়. সর্বোপরি, তারা সেই সময়ের চরিত্রে আবদ্ধ বলে মনে হয়।
পর্দার ছবিগুলি প্যারালাক্স স্ক্রোলিংয়ের মতো একটি কৌশল ব্যবহার করে তৈরি করা হয়। আশ্চর্যের কিছু নেই যে এই কৌশলটি ভালভাবে যোগ্য জনপ্রিয়তা অর্জন করেছে। এই ডিজাইনের ধারণাটি যারা 80-90 এর দশকে খেলেছেন বা বন্ধুদের অবসর সময় দেখেছেন তারা আন্তরিকভাবে গ্রহণ করেছেন।
প্যারালাক্স স্ক্রলিং
বিশ্বের শীর্ষস্থানীয় ব্র্যান্ডগুলির বিপণনকারীরা দীর্ঘকাল ধরে সমস্ত ধরণের প্রযুক্তিগত অগ্রগতি ব্যবহার করেছে৷ এইভাবে, সাইটটিতে একজন নৈমিত্তিক ভিজিটরকেও আগ্রহী করা সম্ভব হয়৷
প্যারালাক্স স্ক্রলিং নাইকি বেশ সফলভাবে ব্যবহার করেছে। কোম্পানির মূল ওয়েবসাইটটি উইডেন এবং কেনেডি দ্বারা ডিজাইন করা হয়েছিল। কিন্তু এই নকশা টিকেনি। আমাদের সময়ের প্রবণতা অনুসারে সংস্থানটি ধীরে ধীরে আপডেট করা হয়েছিল। Activatedrinks.com হল এমন একটি সাইটের উদাহরণ যার ডিজাইন সেই সময়ের নাইকি মার্কেটারদের দ্বারা ব্যবহৃত একটির কথা মনে করিয়ে দেয়৷
স্পীকার খুব বেশি হওয়া উচিত নয়
ভুলে যাবেন না যে সাইটের নকশা প্রায়শই মূল মাপকাঠি যা ভিজিটরকে গাইড করে। খারাপভাবে মৃত্যুদন্ড কার্যকর করা হয়েছেসম্পদ সাধারণত মালিক কোম্পানির তুচ্ছতা ছাপ সঙ্গে ব্যবহারকারী ছেড়ে. কিন্তু সমস্ত ধরণের আকর্ষণীয় ডিজাইনের উপাদান সহ একটি সাইট প্রতিষ্ঠানের মালিকদের আগ্রহের দর্শকদের আকাঙ্ক্ষা নির্দেশ করে৷
এখানে প্যারালাক্স সম্পর্কে মনে রাখা দরকার। এটি একটি বিস্ময়কর হাতিয়ার. কিন্তু এমনকি তারা খুব দূরে বাহিত করা উচিত নয়. কারণ যে পৃষ্ঠায় প্রচুর পরিমাণে বিভিন্ন ধরণের চলমান উপাদান রয়েছে, তা উপলব্ধি করা বেশ কঠিন। ডিজাইনটিকে মাঝারি আড়ম্বরপূর্ণ এবং বোধগম্য করা ভাল।
ডাইনামিক হওয়া উচিত পৃথক উপাদান যার জন্য নির্বাচনের প্রয়োজন। এমন একটি ছবিও থাকতে পারে যা স্তরগুলি ব্যবহার করে তৈরি করা হয়েছে একটি আপেক্ষিক অন্যটির সাথে সরানো। ভুলে যাবেন না যে ব্যবহারকারীর সাইটটি মূলত দর্শকদের জন্য ডিজাইন করা হয়েছে। এটি একটি ওয়েবমাস্টারের একটি মাস্টারপিস হতে হবে না যিনি এটিতে তার সমস্ত জ্ঞান রেখেছেন৷ সর্বোপরি, এই ধরনের পদ্ধতি শুধুমাত্র উপলব্ধিকে জটিল করে তুলবে।
কিভাবে একটি সাইট নেভিগেশন তৈরি করবেন
কীভাবে প্যারালাক্স তৈরি করবেন? এই প্রশ্নটি অনেক ওয়েবসাইট নির্মাতাদের আগ্রহের। ট্যাগ লেখার জটিলতা জানার প্রয়োজন নেই। ইন্টারনেটে বিশেষ সংস্থানগুলি ব্যবহার করা খুব সুবিধাজনক। উপলব্ধ বিপুল সংখ্যক প্রস্তাব থেকে, নিম্নলিখিত সাহায্যকারীদের আলাদা করা যেতে পারে:
- Plax একটি প্রোগ্রাম যা ব্যবহার করা মোটামুটি সহজ। এটি মাউস নড়াচড়া করে পৃষ্ঠাটিকে তরল করে তোলে।
- jQuery প্যারালাক্স ইমেজ স্লাইডার - একটি jQuery প্লাগইন যা ইমেজ স্লাইডার তৈরি করতে ব্যবহৃত হয়।
- Jquery ইমেজ প্যারালাক্স - স্বচ্ছ অঙ্কন ডিজাইন করার জন্য উপযুক্ত। তার পিএনজি ব্যবহারের মাধ্যমে, জিআইএফগুলি গভীরতা নিয়ে যায়, চলাফেরার দ্বারা অ্যানিমেটেড৷
- Curtain.js নির্দিষ্ট প্যানেল সহ একটি পৃষ্ঠা তৈরি করতে ব্যবহৃত হয়। এক্ষেত্রে পর্দা খোলার প্রভাব পরিলক্ষিত হয়।
- স্ক্রলিং প্যারালাক্স: একটি jQuery প্লাগইন হল মাউস হুইল স্ক্রোল করার সময় একটি প্যারালাক্স প্রভাব তৈরি করা।
আরো কিছু দরকারী প্লাগইন
আপনি জানেন, তথ্যের মূল্য সবচেয়ে বেশি। এবং কাঙ্ক্ষিত অর্জনের উপায়ের সংখ্যা যত বেশি জানা যায়, সঠিক ফলাফল পাওয়ার সম্ভাবনা তত বেশি। গতিশীলতা তৈরি করতে ব্যবহৃত কার্যকর প্লাগইন:
- jQuery স্ক্রোল পাথ - নির্দিষ্ট পথে বস্তু স্থাপন করতে ব্যবহৃত হয়।
- Scrollorama একটি jQuery প্লাগইন। এটি আকর্ষণীয় উপাদান নকশা জন্য একটি হাতিয়ার হিসাবে ব্যবহৃত হয়. সুবিধাজনক স্ক্রোলিং এর কারণে আপনাকে পৃষ্ঠার পাঠ্যটিকে "পুনরুজ্জীবিত" করার অনুমতি দেয়৷
- Scrolldeck একটি jQuery প্লাগইন। এটি একক পৃষ্ঠার সাইটগুলির জন্য একটি দুর্দান্ত উপস্থাপনা সমাধান৷
- jParallax মাউস পয়েন্টারের গতিবিধির উপর নির্ভর করে স্তরগুলির গতিবিধি উপস্থাপন করে।
- Stellar.js হল একটি প্লাগইন যার সাহায্যে প্যারালাক্স স্ক্রলিং ইফেক্ট যোগ করে যেকোনো উপাদান ডিজাইন করা হয়েছে।
প্যারালাক্স কার্সারে নোঙ্গর করা হয়েছে
এই প্যারালাক্সটি বেশ চিত্তাকর্ষক দেখাচ্ছে। প্রথম নজরে গতিহীনমাউস কার্সার কাছে এলে সাইট পেজ অবজেক্ট সরে যায়। মনে হচ্ছে এটি জীবন্ত হয়ে উঠেছে এবং যে উপাদানটি সরানো হচ্ছে তা অনুসরণ করে৷
প্রথমে, আপনাকে ছবিটিতে থামতে হবে। প্রয়োজনীয় চিত্রটি একটি ফ্রেমে স্থাপন করা হয়, যখন এর প্রান্তগুলি অবশ্যই লুকিয়ে রাখতে হবে। পদ্ধতিটি খুবই সহজ, এবং ফলে অঙ্কনটি বেশ আকর্ষণীয় দেখায়।
সাইটের জন্য প্যারালাক্স ইফেক্ট ডিজাইন করার একটি চমৎকার উপায়। এর ব্যবহার নির্দেশ করে যে সম্পদ তৈরিতে যথাযথ মনোযোগ দেওয়া হয়েছিল। অতএব, এটি অফার করা পরিষেবা বা তথ্য পড়ার জন্য মনোযোগ দিতে মূল্যবান। এই ধরনের সাইটগুলি অভিন্ন, কিন্তু সহজভাবে ডিজাইন করা সংস্থানগুলির পটভূমিতে আরও সুবিধাজনক দেখায়৷
