সিএসএস সহ কীভাবে স্মার্ট পাঠ্য প্রভাবগুলি কোড করবেন

কন্টেন্ট

• 01. রোলওভার পাঠ্য প্রভাব
• 02. সিএসএস তৈরি করুন
• 03. শব্দটি অবস্থান করুন
• 04. উপর এবং বেশি
• 05. নিচে ঘোরা
• 06. মানুষের জন্য স্বয়ংক্রিয়
• 07. বিকল্প ক্লাস যুক্ত করুন

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

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

01. রোলওভার পাঠ্য প্রভাব

মিডল চাইল্ড ওয়েবসাইটে দুর্দান্ত পাঠ্য প্রভাবগুলির মধ্যে একটি হ'ল মেনুতে রোলওভার এফেক্টের জন্য, যেখানে পাঠ্যগুলিতে বর্ণগুলি আলাদা হয়ে যায় এবং কিছুটা ঘোরানো হয়। কিছু সাধারণ এইচটিএমএল ট্যাগ দিয়ে এটি শুরু করুন।

বিভক্ত </ div> প্রাতঃরাশ / ডিভো </ div>

02. সিএসএস তৈরি করুন

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

বডি {প্রস্থ: 100%; উচ্চতা: 100%; মার্জিন: 0; প্যাডিং: 0; w র‍্যাপার {ডিসপ্লে: গ্রিড; উচ্চতা: 100%; }

03. শব্দটি অবস্থান করুন

দ্য শব্দ শ্রেণি গ্রিডে শব্দটি কেন্দ্র করে। প্রদত্ত যে কোনও পাঠ্য শব্দ বর্গ এ প্রয়োগ করতে পারে। দ্য আপ ক্লাসটি অন্য প্রতিটি বর্ণের জন্য প্রয়োগ করা হচ্ছে এবং এগুলি উপরের দিকে চলে যাবে।

.ওয়ার্ড {ফন্ট-আকার: 3 এম; মার্জিন: অটো অটো; word .ওয়ার্ড। আপ {প্রদর্শন: ইনলাইন-ব্লক; রূপান্তর: অনুবাদ 3 ডি (0 পিএক্স, 0 পিক্স, 0 পিক্স) ঘোরান (0deg); রূপান্তর: সমস্ত 0.5s আউট ইন আউট; }

04. উপর এবং বেশি

এখন নিচে ক্লাস ভাগ খুব অনুরূপ সেটিংস আপ তবে হোভারটি forর্ধ্বমুখী হয়ে চলাচল করে আপ রোলওভার চেহারা বাড়ানোর জন্য উপরের দিকে কিছুটা ঘোরানোও হয়।

.ওয়ার্ড .ডাউন {ডিসপ্লে: ইনলাইন-ব্লক; রূপান্তর: অনুবাদ 3 ডি (0 পিএক্স, 0 পিক্স, 0 পিক্স) ঘোরান (0deg); রূপান্তর: সমস্ত 0.5s আউট ইন আউট; word। শব্দ: হোভার। আপ {রূপান্তর: অনুবাদ 3 ডি (0 পিক্সেল, -8 পিক্স, 0 পিএক্স) ঘোরান (12deg); রঙ: # 058b05}

05. নিচে ঘোরা

ব্যবহারকারী যখন পাঠ্যের উপরে ঘোরাফেরা করেন, ডাউন ক্লাসটি পাঠ্যটিকে নীচের দিকে সরান। পরে জাভাস্ক্রিপ্টে পাঠ্যটি আলাদা স্প্যানগুলিতে বিভক্ত হয়ে ক্লাসগুলি বিকল্প স্প্যানগুলিতে স্বয়ংক্রিয়ভাবে যুক্ত হবে।

.ওয়ার্ড: হোভার .ডাউন {রূপান্তর: অনুবাদ 3 ডি (0 পিক্সেল, 8 পিএক্স, 0 পিক্স) ঘোরান (-12deg); রঙ: # 058b05; }

06. মানুষের জন্য স্বয়ংক্রিয়

প্রতিটি ক্লাসকে বিভিন্ন শ্রেণীর সাহায্যে পরিবর্তিত স্প্যানগুলিতে রাখার ঝামেলা কিছুটা, তাই আমরা নির্বাচককে জিজ্ঞাসা করার জন্য জাভাস্ক্রিপ্ট পেয়ে প্রক্রিয়াটি স্বয়ংক্রিয় করব এবং প্রতিটি চিঠি নিই। এখানে str ভেরিয়েবল বর্তমান অক্ষরটি টেক্সটের মাধ্যমে লুপ করার সাথে সাথে ধরে ফেলবে।

স্ক্রিপ্ট> var উপাদানসমূহ = ডকুমেন্ট.কোয়ারী নির্বাচনকারী সমস্ত (’। শব্দ’); (var i = 0, l = તત્વો-দৈর্ঘ্য; i l; i ++) {var str = উপাদানসমূহ [i] .textContent; উপাদানগুলি [i]। ইনার এইচটিএমএল = ’’;

07. বিকল্প ক্লাস যুক্ত করুন

এখন অন্য লুপ প্রতিটি অক্ষরকে তার নিজস্ব স্প্যান উপাদানগুলিতে রাখে এবং হয় যুক্ত করে আপ বা নিচে spans যাও বর্গ। আপনি যদি ব্রাউজারটিতে এটি দেখেন তবে কিছুটা ঘোরার সময় আপনি প্রতিটি অক্ষর দ্বারা টেক্সট বিভক্ত দেখতে পাবেন।

আপনি মধ্য শিশুদের ওয়েবসাইটে ক্রিয়াকলাপের প্রভাবটি দেখতে পারেন।

(var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); উপাদানগুলি [i] .appendChild (spn); spn.textContent = str [j]; চলুন পোস্ট = (জ% 2)? 'উপর নিচ'; spn.classList.add (pos); } script / লিপি>

এই নিবন্ধটি মূলত সৃজনশীল ওয়েব ডিজাইন ম্যাগাজিনে প্রকাশিত হয়েছিল ওয়েব ডিজাইনার.286 সংখ্যাটি কিনুন বা সাবস্ক্রাইব.