Divi: স্ক্রোল করার সময় অ্যানিমেটেড ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন কীভাবে তৈরি করবেন

আপনি একটি পটভূমি ডিজাইন করতে চান Divi মাস্ক এবং প্যাটার্ন ব্যবহার করে অ্যানিমেটেড পেজ স্ক্রোলিং তৈরি করতে চান? এই টিউটোরিয়ালটি আপনার জন্য...

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

এই টিউটোরিয়ালে, আমরা আপনাকে দেখাবো কিভাবে Divi-এর স্ক্রলিং অপশন ব্যবহার করে ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন তৈরি এবং অ্যানিমেট করতে হয় (কোনও কাস্টম কোডের প্রয়োজন নেই)। 

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

আমরা মনে করি আপনি ফলাফল পছন্দ করবেন।

এর শুরু করা যাক!

জরিপ

এই টিউটোরিয়ালে ব্যাকগ্রাউন্ড স্ক্রলিং অ্যানিমেশনটি কেমন হবে তার একটি সংক্ষিপ্ত চিত্র এখানে দেওয়া হল।

ধারণা

এই নকশার ধারণাটি উপলব্ধি করা খুব কঠিন হওয়া উচিত নয়। আমরা এমন একটি বিভাগ দিয়ে শুরু করি যার একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড রয়েছে।

এরপর, আমরা এমন একটি লাইন তৈরি করব যা (একেবারে) এমনভাবে স্থাপন করা হবে যাতে এটি সম্পূর্ণরূপে অংশটিকে ঢেকে রাখে (একটি ওভারলে এর মতো)। আমরা সারিতে একটি ব্যাকগ্রাউন্ড প্যাটার্ন যোগ করতে পারি।

এরপর, আমরা কলামে একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করতে পারি।

তারপর আমরা যোগ স্ক্রোল প্রভাব সারি এবং কলামে (যেমন স্কেলিং এবং ঘূর্ণন) যা প্যাটার্নটিকে অ্যানিমেট করবে এবং বিভাগের পটভূমিতে আলাদাভাবে মাস্ক করবে।

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

ডিভি বিল্ডারের সাথে একটি পৃষ্ঠা তৈরি করে শুরু করা যাক

শুরু করার জন্য, আপনাকে নিম্নলিখিতগুলি করতে হবে:

ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান পৃষ্ঠাগুলি> নতুন যুক্ত করুন একটি নতুন পৃষ্ঠা তৈরি করতে।

এটিকে একটি শিরোনাম দিন যা আপনার কাছে বোধগম্য হয় এবং ক্লিক করুন Divi বিল্ডার ব্যবহার করুন

তারপর ক্লিক করুন বিল্ডিং শুরু করুন (স্ক্র্যাচ থেকে বিল্ড)

এর পরে, ডিভিতে ডিজাইনিং শুরু করার জন্য আপনার কাছে একটি ফাঁকা ক্যানভাস থাকবে।

আরও পড়ুন: Divi: কিভাবে আপনার ছবি সুন্দর করতে "গ্রেডিয়েন্ট বিল্ডার" ব্যবহার করবেন

Divi ব্যবহার করে কীভাবে অ্যানিমেটেড স্ক্রলিং ব্যাকগ্রাউন্ড মাস্ক এবং প্যাটার্ন তৈরি করবেন

বিভাগের পটভূমি নকশা

প্রথমে, আমরা একটি নতুন লাইন তৈরির বিষয়টি উপেক্ষা করব এবং সরাসরি থিম বিল্ডারের বিদ্যমান ডিফল্ট বিভাগটি পরিবর্তন করব। 

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

বিভাগ সেটিংস খুলুন। ট্যাবের অধীনে নকশা, ন্যূনতম উচ্চতা আপডেট করুন এবং নিম্নরূপ প্যাডিং সরান:

• মার্জিন: 80 ভিএইচ (উপর এবং নীচে)
• প্যাডিং: 0px (শীর্ষ এবং নীচে)

বিভাগের জন্য একটি ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট ডিজাইন করা

আমরা এখন বিভাগে একটি কাস্টম ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট যোগ করতে পারি।

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

• গ্রেডিয়েন্ট স্টপস:
  • 0%: #4158d0
  • 50%: #c850c0
  • 100%: #ffcc70

তারপর রৈখিক গ্রেডিয়েন্টের দিক পরিবর্তন করুন:

• গ্রেডিয়েন্ট দিক: 270 ডিগ্রী

বিভাগে সারি যোগ করুন

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

তারপর আপনার তৈরি করা লাইনটি নকল করুন। এই দ্বিতীয় (ডুপ্লিকেট) লাইনটি আমাদের কন্টেন্টের জন্য ব্যবহার করা হবে যেমনটা আপনি সাধারণত করবেন। 

এখন আপনার ব্যাকগ্রাউন্ড স্ক্রলিং অ্যানিমেশনের জন্য একটি শীর্ষ লাইন এবং সাধারণ সামগ্রীর জন্য একটি লাইন থাকা উচিত।

লাইন কাস্টমাইজ করুন

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

লাইন সেটিংস খুলুন। ট্যাবের নীচে অগ্রসর, নিম্নলিখিত আপডেট করুন:

• অবস্থান: পরম

এর ফলে লাইনটি ডকুমেন্টের কোনও প্রকৃত স্থান দখল না করেই অংশটিকে ওভারল্যাপ করতে পারবে। 

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

ট্যাবের নিচে নকশা, নিম্নরূপ আকারের বিকল্পগুলি আপডেট করুন:

• অ্যাকুয়াসাইজ কলামের উচ্চতা: হ্যাঁ
• প্রস্থ: 100%
• সর্বোচ্চ প্রস্থ: 100%
• উচ্চতা: 100%
• প্যাডিং: 0px (শীর্ষ এবং নীচে)

এখন আপনি লাইনটি দেখতে নাও পেতে পারেন, কিন্তু এটি এখন পুরো অংশের পটভূমি পুরোপুরি ঢেকে ফেলেছে।

লাইনের জন্য একটি ব্যাকগ্রাউন্ড প্যাটার্ন তৈরি করুন

এই উদাহরণে আমরা প্যাটার্ন যোগ করব মিঠাইসমূহ লাইন ব্যাকগ্রাউন্ড হিসাবে।

লাইন সেটিংস খুলুন। বিকল্পের অধীনে পটভূমি, ট্যাব নির্বাচন করুন পৃষ্ঠভূমি প্যাটার্ন এবং নিম্নলিখিত আপডেট করুন:

• ব্যাকগ্রাউন্ড প্যাটার্ন: কনফেটি
• প্যাটার্ন:
  • রঙ: #f6bef7
  • আকার: কাস্টম আকার
  • প্রস্থ: 35 vw
  • পুনরাবৃত্তি মূল: কেন্দ্র

উল্লেখ্য : VW দৈর্ঘ্য ইউনিট ব্যবহার নিশ্চিত করে যে প্যাটার্নটি ব্রাউজারের সাথে স্কেল হবে, নকশাটি সামঞ্জস্যপূর্ণ এবং প্রতিক্রিয়াশীল রাখবে।

লাইনে স্ক্রোল ইফেক্ট যোগ করুন

এখন যেহেতু আমাদের ব্যাকগ্রাউন্ড প্যাটার্নটি ঠিক হয়ে গেছে, আমরা লাইনে স্ক্রলিং ইফেক্ট যোগ করতে পারি।

ট্যাবে যান অগ্রসরবিকল্পের অধীনে স্ক্রোল প্রভাব, নিম্নলিখিত আপডেট করুন:

ট্যাব নির্বাচন করুন অনুভূমিক গতি এবং নিম্নলিখিত আপডেট করুন:

• অনুভূমিক গতি সক্ষম করুন: হ্যাঁ৷
• শুরুর অফসেট: 0,5 (0% এ)
• মিড অফসেট: 0 (40% থেকে 60%)
• অফসেট শেষ: -0,5 (100% এ)

এটি লাইনের ব্যাকগ্রাউন্ড প্যাটার্নটি ৫০ পিক্সেল থেকে বাম দিকে এবং শেষ ৫০ পিক্সেল ডান দিকে সরাব।

"স্কেল আপ অ্যান্ড ডাউন" ট্যাবটি নির্বাচন করুন এবং নিম্নলিখিতগুলি আপডেট করুন:

• উপরে এবং নিচে স্কেলিং সক্ষম করুন: হ্যাঁ
• প্রারম্ভিক স্কেল: 150% (0% এ)
• মিড স্কেল: 100% (40% থেকে 60%)
• শেষ স্কেল: 150% (100% এ)

এটি স্ক্রোল করার সাথে সাথে লাইনের ব্যাকগ্রাউন্ড প্যাটার্নকে স্কেল করবে।

ট্যাব নির্বাচন করুন "ঘোরানো হচ্ছে " এবং নিম্নলিখিত আপডেট করুন:

• ঘোরানো সক্ষম করুন: হ্যাঁ৷
• শুরু ঘূর্ণন: 10 ডিগ্রী (0% এ)
• মধ্য ঘূর্ণন: 0 ডিগ্রী (40% থেকে 60% পর্যন্ত)
• শেষ ঘূর্ণন: -10 ডিগ্রী (100% এ)

মূল পরামর্শ: আপনার ঘূর্ণন সর্বনিম্ন রাখা উচিত, নাহলে আপনি এমন ফাঁক দেখাতে পারেন যেখানে রেখাটি অংশের বাইরে প্রসারিত হয় না। একটি ভাল নিয়ম হল ঘূর্ণন বাড়াতে চাইলে স্কেল বাড়ানো। এটি প্রান্তগুলি উন্মুক্ত না করেই রেখাটিকে অংশের উপর ঘোরানোর অনুমতি দেবে।

কলামে স্ক্রলিং ইফেক্ট সহ একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করুন।

আমাদের সারিটি সম্পূর্ণ হয়ে গেলে, আমরা একই সারির কলামে স্ক্রলিং ইফেক্ট সহ একটি ব্যাকগ্রাউন্ড মাস্ক যুক্ত করতে প্রস্তুত। শুরু করার জন্য, আসুন একটি ব্যাকগ্রাউন্ড মাস্ক যুক্ত করি।

এটি করার জন্য, কলাম সেটিংস খুলুন। ট্যাবের অধীনে ব্যাকগ্রাউন্ড মাস্ক, নিম্নলিখিত আপডেট করুন:

• মাস্ক: লেয়ার ব্লব
• রঙ: #ffffff
• মাস্ক ট্রান্সফর্ম: অনুভূমিক উল্টানো, বিপরীত

কলামে স্ক্রোল প্রভাব যুক্ত করুন

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

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

ট্যাবে যান অগ্রসর. বিকল্প অধীনে স্ক্রোল প্রভাব, ট্যাব নির্বাচন করুন রোটাতিng এবং নিম্নলিখিত আপডেট করুন:

• ঘোরানো সক্ষম করুন: হ্যাঁ৷
• শুরু ঘূর্ণন: -15 ডিগ্রী (0% এ)
• মধ্য ঘূর্ণন: 0 ডিগ্রী (40% থেকে 60% পর্যন্ত)
• শেষ ঘূর্ণন: 15 ডিগ্রি (100% এ)

বিভাগ ওভারফ্লো লুকান

বর্তমানে, স্ক্রলিং করার ফলে যখনই লাইনটি বিভাগের বাইরে প্রসারিত হয় তখনই এটি দৃশ্যমান থাকে।

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

• অনুভূমিক ওভারফ্লো: লুকানো
• উল্লম্ব ওভারফ্লো: লুকানো

এখন এটা আরও ভালো দেখাচ্ছে।

আরো দেখুন: Divi: মাস্ক এবং ব্যাকগ্রাউন্ড প্যাটার্নের 12 টি সংমিশ্রণ

এই উদ্দেশ্যে তৈরি লাইনে বিষয়বস্তু যোগ করা

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

এই উদাহরণের জন্য, আমরা একটি ডামি শিরোনাম যুক্ত করেছি যাতে আমরা দেখতে পারি স্ট্যাটিক টেক্সটের সাথে ব্যাকগ্রাউন্ড অ্যানিমেশন কেমন দেখাবে।

চূড়ান্ত ফলাফল

আসুন আমাদের ডিজাইনের চূড়ান্ত ফলাফলটি একবার দেখে নেওয়া যাক।

এখন DIVI ডাউনলোড করুন!!!

উপসংহার

Divi-এর ব্যাকগ্রাউন্ড অপশন ব্যবহার করে এত সুন্দর ব্যাকগ্রাউন্ড তৈরি করা কতটা সহজ, তা সত্যিই আশ্চর্যজনক। তাছাড়া, Divi-এর স্ক্রলিং ইফেক্টের সাথে অ্যানিমেশন যোগ করলে এই ডিজাইনগুলিতে নতুন প্রাণ আসে।

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

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

আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।

এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...