ভ্যানিলা জাভাস্ক্রিপ্টে ক্যারোসেলের মতো একটি পূর্ণ বৈশিষ্ট্যযুক্ত টেন্ডার তৈরি করুন

ডেটিং ওয়ার্ল্ডের বাইরে চিন্তাভাবনা করে, যে কোনও প্রকারের বিষয়ে ব্যবহারকারীর পছন্দ সংগ্রহ করার উদ্দেশ্যে প্রচুর ব্যবহারের ক্ষেত্রে বাছাই করতে বাম বা ডানদিকে সোয়াইপ করার ধারণাটি প্রয়োগ করা যেতে পারে।

এই প্রসঙ্গে, আমি খাঁটি জাভাস্ক্রিপ্টে নিজে থেকেই একটি 'লাইক ক্যারোসেল' তৈরি করার সিদ্ধান্ত নিয়েছি এবং আমার অভিজ্ঞতাটি আপনার সাথে ভাগ করে নেওয়ার জন্য করেছি।

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

এটি আমরা অর্জন করতে যাচ্ছি:

নিস! তাই না?

পদক্ষেপ 1 - এটি করা যাক

প্রথম পদক্ষেপ হিসাবে, আমরা আমাদের প্রকল্পের জন্য একটি বুটস্ট্র্যাপ পৃষ্ঠা লিখতে চলেছি:

# বোর্ড ডিভিটি হ'ল আমাদের ক্যানভাস এবং ক্লাসের প্রতিটি তাত্ক্ষণিক শিশু। ডেকের একটি উপাদান ard ব্রাউজার সূচকটি উপস্থিতির ক্রম অনুসারে ডিভস ডিগ্রিযুক্ত, আমরা জানি যে শেষ। কার্ড কার্ডটি সর্বদা শীর্ষস্থানীয় কার্ড হবে।

পদক্ষেপ 2 - সিএসএস উদ্ধার!

আমরা যদি আমাদের ওয়েব পৃষ্ঠাটি খোলার চেষ্টা করি তবে আমরা কেবল একটি সাদা পর্দা দেখতে পাব। সিএসএস উদ্ধার!

ফলাফলটি কিছুটা ধূসর ব্যাকগ্রাউন্ডের মাঝখানে একটি সাদা কার্ড হওয়া উচিত।

পদক্ষেপ 3 - এটি এক ধরণের যাদু

ব্যবহারকারীর কার্ডের সাথে যোগাযোগ করার সাথে সাথে এখন আমাদের স্যুইপিং ইভেন্টটি ক্যাপচার করতে হবে।

এটি করার জন্য আমি আশ্চর্যজনক হামারজেএস লাইব্রেরিটি বেছে নিয়েছি।

হাতুড়ি একটি ওপেন-সোর্স লাইব্রেরি যা স্পর্শ, মাউস এবং পয়েন্টার এভেন্টস দ্বারা তৈরি অঙ্গভঙ্গিগুলি সনাক্ত করে। এটির কোনও নির্ভরতা নেই এবং এটি ছোট।

হাতুড়ি পাঠাগারটি অন্তর্ভুক্ত (লেখার সময় v2.0.8), আমরা এমন শ্রেণিটি তৈরি শুরু করতে পারি যা প্রকৃতপক্ষে অঙ্গভঙ্গিগুলি পরিচালনা করবে:

পদক্ষেপ 4— আসুন, আমার দিকে এগিয়ে যান!

আমরা এর সনাক্তকারীদের কাছে কলব্যাক ফাংশনগুলির যুক্তি হিসাবে হামার শনাক্ত করা অঙ্গভঙ্গিগুলি সম্পর্কে প্রচুর তথ্য দেয়।

আসুন একটি যুক্তি লিখুন যা কার্ডটিকে টেনে আনার সময় পয়েন্টারটির সাথে বরাবর সরিয়ে নিয়ে যায় এবং তারপরে ছেড়ে দেওয়া হলে ফিরে ফিরে আসে।

যখন ব্যবহারকারী কার্ডটি টানতে শুরু করেন, আমরা পয়েন্টারের একই গতিতে একটি গতিবিধি পাওয়ার জন্য প্রাথমিক স্থানাঙ্কগুলি সংরক্ষণ করি এবং সিএসএস রূপান্তর সম্পত্তিটি সরিয়ে ফেলি।

আমরা সিএসএস ট্রান্সলেট এক্স এবং ট্রান্সলেটওয়্যার একক পরিমাপকে জানি না বলে প্রদত্ত, আমরা পিক্সেলগুলিতে স্পেসিয়াল স্থানাঙ্কের সাথে একটি সিএসএস ট্রান্সফর্ম ম্যাট্রিক্সে বিদ্যমান বৈশিষ্ট্যগুলি অনুবাদ করতে getComputesStyle বলি।

যখন কার্ডটি প্রকাশিত হবে (e.isFinal) আমরা রূপান্তর বৈশিষ্ট্যগুলি পিছনে সেট করি, সুতরাং এটি ডেকের শীর্ষে (স্বাচ্ছন্দ্য) সহজেই ফিরে যেতে পারে।

ট্রান্সলেট এক্স এবং ট্রান্সলেট ওয়াইয়ের বৈশিষ্ট্যগুলির পরিবর্তে আপনি উপরের এবং বাম বৈশিষ্ট্যগুলি পরিবর্তনের জন্য প্রলুব্ধ হতে পারেন তবে আধুনিক ব্রাউজারগুলি হুডের নীচে একটি দুর্দান্ত কাজ করে - আপনার ডিভাইসের জিপিইউ ব্যবহার করে - সিএসএসে পরিবর্তনগুলি করার সময় মসৃণ ট্রানজিশনগুলি প্রদর্শন করতে রূপান্তর বৈশিষ্ট্য প্রয়োগ করা হয়।

পদক্ষেপের 5-45 শেডের ঘূর্ণন

আপনি যদি কখনও টিন্ডার অ্যাপ্লিকেশন ব্যবহার করেন তবে আপনি সম্ভবত লক্ষ্য করেছেন যে আপনি স্ক্রিনের উল্লম্ব সীমানাগুলির দিকে যত বেশি টানবেন, তত তত পছন্দ করে কার্ডটি ঘোরে।

এই বৈশিষ্ট্যটির অনুলিপি করতে আমাদের এক্স অক্ষের কার্ডের অবস্থানের সাথে অনুপাতের ভিত্তিতে এবং দর্শনটির মোট প্রস্থের মধ্যে 0 এবং +/- 45 ডিগ্রির মধ্যে একটি মান গণনা করতে হবে।

Step ষ্ঠ ধাপ - আমি বিশ্বাস করি আমি উড়তে পারি!

যখন আঙুলের অবস্থানটি একটি নির্দিষ্ট দোরগোড়ায় পৌঁছে যায়, তখন কার্ডটি প্রকাশের সময় নির্বাচিত দিকে ফেলে দেওয়া উচিত।

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

পদক্ষেপ 7— অন্য এক হিট!

প্রতিটি সফল সোয়াইপের পরে প্রোগ্রামগতভাবে কার্ডগুলি যুক্ত করার সময় এসেছে (তাদের কার্যকর স্থানধারক চিত্রগুলির API এর জন্য picsum.photos এর জন্য অনেক ধন্যবাদ):

# বোর্ড ডিভের ভিতরে একটি দ্বিতীয় কার্ড রাখুন:

এখন, প্রতিটি সফল সোয়াইপের পরে একটি নতুন কার্ড যুক্ত করা যাক:

প্রদত্ত যে আমরা প্রতিটি সফল সোয়াইপ পরে বারবার একটি নতুন হাতুড়ি উদাহরণ তৈরি করছি, স্মৃতি বরাদ্দের উন্নতির জন্য আমাদের আগেরটি ধ্বংস করা উচিত; নতুন হাতুড়ি কল করার ঠিক আগে হ্যান্ডেল পদ্ধতির ভিতরে নিম্নলিখিত লাইনটি যুক্ত করুন:

পদক্ষেপ 8 - ভিজ্যুয়াল-এফেক্টস

আসল কারাউসেলে, দ্বিতীয় কার্ডটি ধীরে ধীরে আকারের আকারে বাড়িয়ে দেয় প্রথম কার্ডটি ডেকে ছেড়ে যেতে শুরু করার সাথে সাথে; তদ্ব্যতীত, যখন ব্যবহারকারী কার্ডের উল্লম্ব দিকগুলিতে ট্যাপ করেন তখন একটি দুর্দান্ত দ্বিধা প্রভাব ঘটে।

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

স্কেল = (95 + (5 * ম্যাথ.এবস (প্রোপেক্স)) / 100)

.Card CSS শ্রেণিতে 95% এর একটি ডিফল্ট স্কেল মান সেট করতে মনে রাখবেন।

রূপান্তর: ট্রান্সলেটএক্স (-50%) অনুবাদ Y (-50%) স্কেল (0.95);

এখানে সম্পূর্ণ কারাউসেল শ্রেণি:

আরো চাই?

আপনি যদি এই টিউটোরিয়ালটি উপভোগ করেন - দয়া করে তালি, ভাগ করুন এবং তারকা।

https://github.com/simonepm/likecarousel

আরো দেখুন

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