কম্পিউটার

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

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

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

সম্ভাবনা কি?

HTML5 এর সাথে, CSS3 হল আধুনিক ওয়েব ডিজাইনের সাথে সম্পর্কিত সংক্ষিপ্ত রূপ। সংক্ষেপে, CSS হল ওয়েব উপাদান যা ব্যবহারকারীদের ওয়েব পৃষ্ঠার চেহারা যেমন বিন্যাস, অবস্থান, ফন্ট, রঙ ইত্যাদি নিয়ন্ত্রণ করতে সক্ষম করে। এর সর্বশেষ অবতার, CSS3, ব্যবহারকারীদের ব্যবহার করে ছবি এবং অ্যানিমেশন তৈরি করতে দেওয়ার জন্য যথেষ্ট স্মার্ট। কোড।

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

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

  • 50+ এন্ট্রি, এক্সিট, এবং অ্যাটেনশন সিকার অ্যানিমেশনগুলি
  • একটি চমৎকার অ্যানিমেশন সিকোয়েন্স তৈরি করতে অ্যানিমেশনে বিলম্ব বৈশিষ্ট্য এবং সময়কাল নিয়ন্ত্রণ প্রদান করে
  • ব্যবহারকারীদের অসীমভাবে বা নির্দিষ্ট সংখ্যক বার অ্যানিমেশন প্রয়োগ করার অনুমতি দিন
  • স্বতন্ত্র অ্যানিমেশন ব্লকে কাস্টম CSS ক্লাস যোগ করার বিকল্প
  • স্মার্টফোন এবং ট্যাবলেটে অ্যানিমেশন সক্রিয় বা নিষ্ক্রিয় করার বিকল্পগুলি

আপনি এটাকে অ্যানিমেট দিয়ে কি করতে পারেন! প্লাগ লাগানো? আপনি আপনার নিবন্ধগুলিতে সহজ ইন্টারঅ্যাকটিভিটি যোগ করতে পারেন, প্রলোভনসঙ্কুল বিক্রয় পৃষ্ঠা তৈরি করতে পারেন, আপনার কথাসাহিত্যের আবেগকে আরও গভীর করতে পারেন, অথবা আপনি চাইলে একটি শক্তিশালী ব্যবসায়িক উপস্থাপনাও তৈরি করতে পারেন। শুধু মনে রাখবেন সীমাহীন অ্যানিমেশন দিয়ে আপনার দর্শকদের বোমাবাজি করা বিশ্বস্ত পাঠক পাওয়ার সর্বোত্তম উপায় নয়।

এনিমেট ইট দিয়ে শুরু করা!

প্লাগইনটি ইনস্টল এবং সক্রিয় করার পরে, আপনি "WordPress' Editor এ অ্যানিমেশন যোগ করার বোতামটি খুঁজে পেতে পারেন৷ এই বোতামটি শুধুমাত্র ভিজ্যুয়াল মোডে দেখাবে, কিন্তু আপনি যদি কমান্ডগুলি শিখে থাকেন, তাহলে প্লেইন টেক্সট মোড থেকে কোডগুলি সন্নিবেশ করা সম্ভব (এটি সম্পর্কে আরও পরে)।

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

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

  • অ্যানিমেশন আপনি কি ধরনের অ্যানিমেশন চান তা বেছে নেওয়ার জায়গা।
  • বিলম্ব অ্যানিমেশন শুরু হওয়ার আগে আপনাকে সময় সামঞ্জস্য করতে সাহায্য করবে।
  • সময়কাল অ্যানিমেশন শুরু থেকে শেষ পর্যন্ত কতক্ষণ চালানো হবে সে সম্পর্কে। সংখ্যা যত বেশি হবে, অ্যানিমেশন তত ধীর হবে।
  • সময় একটি সময়ে খেলা অ্যানিমেশনের অনুপাত। উদাহরণ স্বরূপ, “easeIn” প্রভাব অ্যানিমেশনটিকে শুরুতে ধীরে ধীরে এবং শেষের দিকে দ্রুত চালাবে।

আপনি "অ্যানিমেট ইট!" ব্যবহার করে এটি খেলে প্রভাবের সংমিশ্রণগুলি পরীক্ষা করতে পারেন। বোতাম ফলাফলটি আপনার পছন্দের হলে, আপনি এটিকে আপনার সামগ্রীতে ব্যবহার করতে "ঢোকান" বোতাম টিপুন৷

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

"প্রস্থান" ট্যাবটি এন্ট্রির সাথে কমবেশি একই রকম, কিন্তু একটি অ্যানিমেশন যোগ করার জন্য যা স্ক্রীন ছেড়ে যাবে। দুটিকে একত্রিত করে, আপনি একটি বস্তু যুক্ত করতে পারেন যা পর্দায় প্রদর্শিত হবে এবং তারপর অদৃশ্য হয়ে যাবে৷

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

"বিকল্প" ট্যাব হল যেখানে আপনি অ্যানিমেশনের সাধারণ সেটিংস নিয়ন্ত্রণ করেন। এখানে আপনি একটি লুপে বা শুধুমাত্র একবার খেলার জন্য অ্যানিমেশন সেট করতে পারেন, উপাদানের চূড়ান্ত অবস্থা রাখতে পারেন, কাস্টম CSS কোড যোগ করতে পারেন এবং ট্রিগার সেট করতে পারেন যা অ্যানিমেশন শুরু করবে। বিশেষত ট্রিগার সম্পর্কে – “অ্যানিমেট অন” সেটিং – আপনি স্ক্রোল বেছে নিতে পারেন, উদাহরণস্বরূপ, এবং অ্যানিমেশনটি তখনই শুরু হবে যদি এলাকাটি আগে থেকেই স্ক্রিনে দৃশ্যমান হয়।

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

আপনার সামগ্রী যোগ করা

"ঢোকান" বোতাম টিপানোর পরে, আপনি আপনার বিষয়বস্তুর এলাকায় কয়েকটি শর্টকোড যোগ করা দেখতে পাবেন। এই শর্টকোডগুলিই অ্যানিমেশন নিয়ন্ত্রণ করবে। এবং যেহেতু সেগুলি শুধুমাত্র মান সহ কোড, আপনি যদি কোডগুলির সাথে ভাল হন এবং চান তবে আপনি ম্যানুয়ালি কোডগুলি যোগ করতে পারেন। যাইহোক, অন্যান্য লোকেদের শুধু অ্যানিমেট ইট-এর সাথে লেগে থাকা উচিত! বোতাম।

আপনি পাঠ্যের একটি লাইনও দেখতে পাবেন যেখানে লেখা আছে, “দয়া করে এই এলাকায় আপনার সামগ্রী যোগ করুন। ” এখানে আপনি যে আইটেমগুলিকে অ্যানিমেট করতে চান তা যোগ করতে পারেন। এটি পাঠ্য, ছবি, আইকন, লোগো, অডিও, ভিডিও বা এমনকি অন্যান্য শর্টকোড হতে পারে। আমি Typed Js প্লাগইন ব্যবহার করে তৈরি করা একটি টাইপ-ইফেক্ট শর্টকোড যোগ করার চেষ্টা করেছি এবং ফলাফলটি দুর্দান্ত।

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

যদি এমন একটি জিনিস থাকে যা আমি অ্যানিমেট ইট ব্যবহার সম্পর্কে বলতে পারি! প্লাগইন, এটি হবে "পরীক্ষা!" এটির সাথে খেলুন এবং আপনি যে ফলাফলটি চান তা পেতে বিভিন্ন সমন্বয় চেষ্টা করুন। এটা একটা মজা. এবং এখানে ফলাফল যে আমি এক মিনিটেরও কম সময়ের মধ্যে এসেছি। আমি এটা অ্যানিমেট একত্রিত! টাইপড Js প্লাগইন সহ প্লাগইন।

কিভাবে আপনার ওয়ার্ডপ্রেস সামগ্রীতে দুর্দান্ত CSS3 অ্যানিমেশন যোগ করবেন

আপনি কি মনে করেন আপনার ওয়েব সামগ্রীতে ইন্টারেক্টিভ উপাদান যুক্ত করার সময় এসেছে? আপনি প্লাগইন চেষ্টা করার পরিকল্পনা করছেন? আপনি অ্যানিমেশন জন্য বিভিন্ন প্লাগইন ব্যবহার করেন? নীচের মন্তব্য ব্যবহার করে শেয়ার করুন.


  1. কীভাবে আপনার ওয়ার্ডপ্রেস সাইটে একটি দুর্দান্ত টাইপিং প্রভাব যুক্ত করবেন

  2. এই ওয়ার্ডপ্রেস প্লাগইনগুলি যোগ করুন এবং আপনার সাইটে আরও ট্রাফিক পান

  3. কিভাবে আপনার ম্যাকে একটি প্রিন্টার যোগ করবেন?

  4. কিভাবে আপনার ওয়ার্ডপ্রেস ডেটাবেস পরিষ্কার করবেন