আপনার সাইটে একটি গতিশীল ইন্টারফেস ব্যবহারকারীদের দৃষ্টি আকর্ষণ করবে এবং ট্রাফিক বাড়িয়ে তুলবে। কোনও ওয়েবসাইটের জন্য অ্যানিমেটেড শিরোনাম তৈরি করা ততটা কঠিন নয় যতটা প্রথম নজরে মনে হয়।
নির্দেশনা
ধাপ 1
আসুন একটি অ্যানিমেটেড শিরোলেখ তৈরি করার চেষ্টা করি, যা মাউস কার্সার এর উপর ঘুরে যখন এটির কনফিগারেশন পরিবর্তন করে। উদাহরণস্বরূপ, শিরোনামের একটি কালো-সাদা ছবি ইন্টারঅ্যাকশন করার সময় রঙে রূপান্তরিত হয়েছিল বা অন্যটিতে পরিবর্তিত হয়েছিল।
ধাপ ২
অফিসিয়াল ওয়েবসাইট (jquery.com) থেকে ডাউনলোড করার পরে আপনার কম্পিউটারে jQuery লাইব্রেরি ইনস্টল করুন।
ধাপ 3
স্ক্রিপ্ট ট্যাগ ব্যবহার করে হেড ট্যাগগুলির মধ্যে আপনার এইচটিএমএল ফাইলটিতে লাইব্রেরিটি লিঙ্ক করুন:
পদক্ষেপ 4
দুটি শিরোনাম নির্বাচন করুন যা ব্যবহারকারী যখন শিরোনামটির সাথে যোগাযোগ করে তখন একে অপরকে প্রতিস্থাপন করে। আপনি যদি কালো এবং সাদা থেকে রঙে রূপান্তর করতে চান তবে ছবিটির একটি অনুলিপি তৈরি করুন এবং ফটোশপটিতে এটি বিচ্ছিন্ন করুন।
পদক্ষেপ 5
এইচটিএমএল-ডকুমেন্টে দুটি আইটেমের একটি তালিকা তৈরি করুন এবং চিত্র ট্যাগ ব্যবহার করে প্রতিটিটিতে ছবি সংযুক্ত করুন। তালিকায় নিজেই একটি স্টাইল ক্লাস প্রয়োগ করুন
পদক্ষেপ 6
আপনার সাইট শিরোনামের জন্য দায়ী যে ডিভিতে এটি করুন। প্রথমে চিত্রটির ঠিকানা নির্দিষ্ট করুন যা স্থিতিশীল অবস্থায় প্রতিফলিত হওয়া উচিত এবং তারপরে হোভারে প্রদর্শিত হবে।
পদক্ষেপ 7
প্রথম ছবিতে শ্রেণি = "পরিভায়া" এবং দ্বিতীয় ছবিতে "শ্রেণি" যুক্ত করুন।
পদক্ষেপ 8
সংযুক্ত সিএসএস ফাইলে এই শ্রেণীর জন্য উপাদানগুলির নিখুঁত অবস্থান (অবস্থান: নিখুঁত;), নির্দিষ্ট উচ্চতা এবং প্রস্থ (উচ্চতা এবং প্রস্থ) নির্দিষ্ট করুন।
পদক্ষেপ 9
একে অপরের উপরে ছবি স্তর। এর জন্য জেড-ইনডেক্স স্টাইলটি ব্যবহার করুন। এটি আপনাকে z-axis বরাবর উপাদানগুলি সারিবদ্ধ করতে দেয় যা স্ক্রিনের গভীরতায় আমাদের থেকে দূরে চলে।
পদক্ষেপ 10
তালিকার জন্যই, প্রবর্তন, আপনার প্রয়োজনীয় প্রান্তিককরণ নির্দিষ্ট করুন এবং তালিকা আইটেমগুলি সরিয়ে ফেলুন (তালিকা-শৈলীর ধরণ: কিছুই নয়)।
পদক্ষেপ 11
একটি.js ফাইল তৈরি করুন এবং এতে নিম্নলিখিত কোডটি আটকে দিন:
document (দস্তাবেজ)। প্রস্তুত (ফাংশন () {
"(" img.grey ") over
ফাংশন () {
$ (এটি).স্টপ ()। অ্যানিমেট ({"ধোঁয়াশা": "0" "," ধীর ");
}, ফাংশন () {
$ (এটি).স্টপ ()। অ্যানিমেট ({"ধূলিপাত": "1"}, "ধীর");
});
});
পদক্ষেপ 12
এই কোডটি আপনার শিরোলেখকে ক্রিয়ায় সঞ্জীবিত করবে।. Js ফাইলটি এইচটিএমএল ডকুমেন্টের সাথে সংযোগ করতে ভুলবেন না।
