অ্যানিমেটেড গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড

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

এখানে একটি লাইভ পৃষ্ঠায় চলমান প্রভাব। বিষয়বস্তু রাখা অবস্থায় বিভাগটি তার রঙ সেটের মাধ্যমে স্থানান্তরিত হয়:

অ্যানিমেটেড গ্রেডিয়েন্ট বিজি এক্সটেনশন কী করে #

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

সবকিছুই উপাদানের উপরই CSS-এ চলে, তাই হোস্ট করার জন্য কোনও ভিডিও বা ছবি সংকুচিত করার জন্য নেই এবং উপরের পাঠ্যটি নির্বাচনযোগ্য এবং পাঠযোগ্য থাকে।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
• অ্যানিমেটেড গ্রেডিয়েন্ট বিজি একটি বিনামূল্যের এক্সটেনশন, তাই কোনো প্রো লাইসেন্সের প্রয়োজন নেই।

অ্যানিমেটেড গ্রেডিয়েন্ট বিজি এক্সটেনশন কীভাবে সক্ষম করবেন #

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

একটি বিভাগে গ্রেডিয়েন্ট সেট আপ করুন #

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

• অ্যানিমেশন প্রভাব: রঙ আন্দোলনের সহজীকরণ, ডেমোতে সহজ করুন।
• কোণ: গ্রেডিয়েন্টের দিক, -45 একটি তির্যক ঝাড়ু দেওয়ার জন্য ডেমোতে।
• মোট অ্যানিমেশন সময়কাল (সেকেন্ড): আপনার সমস্ত রঙের মাধ্যমে একটি সম্পূর্ণ ট্রিপ। ডেমো 6 সেকেন্ড ব্যবহার করে।
• ট্রানজিশন মসৃণতা (সেকেন্ড): ডেমোতে 3 সেকেন্ডের মধ্যে একটি রঙ কতটা আলতোভাবে পরের দিকে চলে যায়। প্যানেল ইঙ্গিত এটি সোজা বলে: উচ্চতর মান রঙের মধ্যে মসৃণ রূপান্তর তৈরি করে।
• রঙ: গ্রেডিয়েন্ট ধরে থাকা একটি রিপিটার থেমে যায়। ক্লিক করুন আইটেম যোগ করুন অন্য রঙের জন্য, অথবা X একটি ড্রপ করার জন্য।

রং বাছাই #

রঙ তালিকার প্রতিটি সারি একটি আদর্শ পিকার খোলে। ডেমোটি একটি সায়ান, বেগুনি এবং কমলা সেট দিয়ে শুরু হয়, তারপরে অদলবদল করা বন্ধ হয়ে যায়: একটি সরান এবং লুপটি শক্ত হয়ে যায়, একটি গভীর নীল (#3D6CD6) যোগ করুন এবং চক্রটি অবিলম্বে এটি তুলে নেয়। লাইভ প্রিভিউ এটিকে মজাদার অংশ করে তোলে; আপনি স্পর্শ করা প্রতিটি স্টপে বিভাগের মেজাজ পরিবর্তন দেখতে পান।

একই তাপমাত্রা পরিসরে দুই বা তিনটি রঙ মার্জিত হিসাবে পড়া। পুরো চাকা জুড়ে পাঁচটি রঙ স্ক্রিনসেভার হিসাবে পড়া। ছোট শুরু করুন।

পৃষ্ঠায় ফলাফল #

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

একটি ব্যবহারিক নোট: অন্ধকার পাঠ্য হালকা গ্রেডিয়েন্ট স্টপে পাঠযোগ্য থাকে তবে স্যাচুরেটেডগুলিতে অদৃশ্য হয়ে যেতে পারে। সেটের প্রতিটি রঙের বিপরীতে আপনার শিরোনাম পরীক্ষা করুন, শুধুমাত্র প্রথম ফ্রেমে নয়।

যেখানে অ্যানিমেটেড গ্রেডিয়েন্ট ভালো কাজ করে #

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

ভিডিও টিউটোরিয়াল #

স্ক্র্যাচ থেকে নির্মিত গ্রেডিয়েন্ট দেখুন, এক্সটেনশন সক্ষম করা থেকে সমাপ্ত চলমান পটভূমিতে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

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