ওয়ার্ডপ্রেস সাইটে প্যারাল্যাক্স ইফেক্ট সহজে যোগ করার পদ্ধতি

আপনি এটাকে গিমিক বলুন, আপনি এটাকে আই ক্যান্ডি বলুন, কিন্তু ওয়েব ডিজাইনে প্যারাল্যাক্স ইফেক্ট এখনো আছে থাকবে। এটি একটি এলিমেন্ট যা আপনার সাইটকে "WOW" ফ্যাক্টর দেবে। যদিও ইফেক্টটি কিছু thờiয়েক ধরে আছে, এবং অনেক সাইট এটি ইমপ্লিমেন্ট করেছে তাদের ডিজাইনে, এখনো এটি কুল।

আপনি যদি আপনার ওয়ার্ডপ্রেস সাইটে ইফেক্টটি যোগ করতে প্রস্তুত হন, তো টিউন্ড থাকুন।

প্যারাল্যাক্স কী?

যারা এই টার্ম সাথে পরিচিত নন, তাদের জন্য ডিকশনারি "প্যারাল্যাক্স"-কে ডিফাইন করে "वह प्रभाव जिसके द्वारा किसी वस्तु की स्थिति या दिशा भिन्न प्रतीत होती है जब उसे विभिन्न स्थितियों से देखा जाता है।"

ওয়েবসাইট ডিজাইন বিশ্বে প্যারাল্যাক্স হলো একটি টেকনিক যেখানে ব্যাকগ্রাউন্ড ইমেজ আলাদা গতিতে মুভ করে, সাধারণত ফোরগ্রাউন্ড ইমেজের চেয়ে ধীর। উদ্দেশ্য হলো ২ডি এনভায়রনমেন্টে গভীরতার ভ্রান্তি (faux 3D ইফেক্ট) সৃষ্টি করা।

প্যারাল্যাক্সের অ্যাপ্লিকেশন ১৯৮০ দশক থেকে গেমিং ওয়ার্ল্ডে আছে, কিন্তু ওয়েব ডিজাইনাররা ২০১১ থেকে HTML5 এবং CSS3 ব্যবহার করে ব্যাপকভাবে এটি ব্যবহার শুরু করল।

প্রথম পথ: ওয়ার্ডপ্রেস থিম

আপনি যদি ওয়ার্ডপ্রেস ইউজার হন, প্যারাল্যাক্স ইফেক্ট আপনার সাইটে পাওয়ার সবচেয়ে সহজ উপায় হচ্ছে বিল্ট-ইন প্যারাল্যাক্স ইফেক্টসহ ওয়ার্ডপ্রেস থিম ব্যবহার করা। থিম স্যুইচ করলেই হয়ে যাবে।

ফ্রি এবং পেইড—প্রচুর প্যারাল্যাক্স-রেডি WP থিম আছে। গুগল এবং ওয়ার্ডপ্রেস থিম রিপোজিটরিতে কুইক সার্চ করলে আপনার হ্যান্ডল করার চেয়ে বেশি অপশন পাবেন।

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

১. Parallax Frame

২. Marvy

৩. SimpleShift

৪. Eleganto

৫. Integral

৬. Zeal

৭. Juniper

৮. এবং ওয়ার্ডপ্রেসের লেটেস্ট অফিসিয়াল থিম Twenty Seventeen-ও প্যারাল্যাক্স হেডার সাপোর্ট করে।

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

প্রতিটি থিম ভিন্ন, কিন্তু সাধারণত "Appearance -> Customize" মেনু থেকে ব্যাকগ্রাউন্ড প্যারাল্যাক্স ইমেজ কাস্টমাইজ করা যায় এবং থিম সেটিংস অনুযায়ী নির্দিষ্ট মেনু বেছে নেওয়া যায়।

দ্বিতীয় পথ: ওয়ার্ডপ্রেস প্লাগইন

আপনি যদি আপনার পছন্দের এলিয়ার ইফেক্টটি প্রয়োগ করতে চান, প্লাগইন ব্যবহার করতে হবে। থিমের মতো সংখ্যা বেশি নাও, কিন্তু ওয়ার্ডপ্রেস প্যারাল্যাক্স প্লাগইন বেশ কিছু আছে যা আপনি ট্রাই করতে পারেন। প্লাগইন রিপোজিটরি থেকে কিছু: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider, এবং Aesop Story Engine।

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

Parallax Scroll-এ, উদাহরণস্বরূপ, আপনি একটি নতুন প্যারাল্যাক্স তৈরি করতে পারেন নতুন পোস্ট তৈরির মতো। এডিটিং ইন্টারফেসও সিমিলার লাগে। প্যারাল্যাক্স ব্যাকগ্রাউন্ড ইমেজ যোগ করতে "Set featured image" অপশন ব্যবহার করুন। টাইটেল ও পোস্ট কন্টেন্ট অপশনাল।

কন্টেন্ট বক্সের নিচে অনেক অপশন আছে যেগুলো টইক করা যায়, কিন্তু সেগুলোও অপশনাল।

"Publish" বাটনে ক্লিক করলে একটি শর্টকোড পাবেন। এই শর্টকোড যেকোনো সাপোর্টেড জায়গায় (পোস্ট, পেজ, উইজেট, ইত্যাদি) ইন্সার্ট করলে প্যারাল্যাক্স ইফেক্ট পাবেন।

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

আপনার আর্সেনালে যোগ করতে পারেন একটা ছোট ট্রিক: কেউ বলেনি আপনি থিম এবং প্লাগইন কম্বাইন করতে পারবেন না। একাধিক প্লাগইন ব্যবহার করাও লিগ্যাল। আপনি উদাহরণস্বরূপ Twenty Seventeen থিম ব্যবহার করতে পারেন এবং Aesop Story Engine প্লাস Parallax Scroll ইনস্টল করতে পারেন এক্সট্রা স্পাইসিং আপনার ওয়েব রেসিপির জন্য।

এখন আপনি প্যারাল্যাক্স যাত্রা শুরু করতে পারেন এবং আপনার ভিজিটরদের চমকাতে পারেন।