DIVI একটি ওয়েবসাইটকে গতিশীলতা দেওয়ার ক্ষেত্রে প্রচুর অ্যানিমেশন সম্ভাবনা নিয়ে আসে। যাইহোক, আপনি একটি কন্টেইনারে একবারে একবার এই অ্যানিমেশনগুলি যোগ করতে পারেন। যদি কিছু অ্যানিমেশনের জন্য এটি পুরোপুরি যথেষ্ট, সময়মত, আপনি দ্রুত এটি সীমিত খুঁজে পেতে পারেন। উদাহরণস্বরূপ, কখনও কখনও, আপনি একাধিক টেক্সট অ্যানিমেশন যোগ করতে চাইতে পারেন এবং এটিই আজ আমরা টেক্সট মডিউল, Letterize.js & Animate.js ব্যবহার করে কভার করব যা জাভাস্ক্রিপ্ট লাইব্রেরি যা DOM উপাদানগুলিতে CSS অ্যানিমেশন দেয়। সেই পদ্ধতির সাহায্যে, আপনি অন্য যেকোন ডিভি মডিউল দিয়ে এই জাতীয় অ্যানিমেশন তৈরি করতে সক্ষম হবেন।
চল শুরু করি.
সম্ভাব্য শেষ ফলাফল
এখানে একটি সম্ভাব্য ফলাফল রয়েছে যা আমরা টিউটোরিয়ালের শেষে পৌঁছাতে পারি।
1. একটি হিরো সেকশন ডিজাইন তৈরি করুন
আমরা "হিরো সেকশন" নামে একটি বড় বিভাগ তৈরি করে শুরু করব এবং এটিতে একটি অনন্য বিভাগ যোগ করব।
আশ্চর্যজনক ওয়েবসাইট তৈরি করুন
সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে
এখুনি শুরু করুননতুন বিভাগ যোগ করুন
ব্যবধান
একটি নতুন পৃষ্ঠা তৈরি করে শুরু করুন। সেই পৃষ্ঠার ভিতরে, একটি নতুন বিভাগ যোগ করুন। বিভাগ সেটিংস খুলুন এবং উপরের এবং নীচের প্যাডিংটি নিম্নরূপ পরিবর্তন করুন:
- শীর্ষ প্যাডিং: 180px (ডেস্কটপ), 100px (ট্যাবলেট), 50px (ফোন)
- নীচের প্যাডিং: 180px (ডেস্কটপ), 100px (ট্যাবলেট), 50px (ফোন)
এক সারি যোগ করুন
একক কলামের কাঠামো
নিম্নলিখিত কলাম কাঠামো ব্যবহার করে একটি নতুন সারি যোগ করে এগিয়ে যান:
ব্যবধান কনফিগার করুন
আমরা এখন কোনো মডিউল যোগ করব না বরং প্যাডিং সেটিংস সংজ্ঞায়িত করব।
- নীচের প্যাডিং: 0px
প্রথম কলামে টেক্সট মডিউল যোগ করুন
H1 কপি যোগ করুন
আমরা এই সারিতে যে মডিউলটি যোগ করব তা হল একটি পাঠ্য মডিউল। আপনার পছন্দের কিছু H1 সামগ্রী যোগ করুন।
H1 পাঠ্য সেটিংস
মডিউল ডিজাইন ট্যাবে স্যুইচ করুন এবং আসুন নিম্নলিখিত পাঠ্য সেটিংস পরিবর্তন করি:
- শিরোনাম হরফ: মন্টসেরাট
- শিরোনাম পাঠ্যের রঙ: rgba(232,232,232,0.41)
- শিরোনাম পাঠ্যের আকার: 80px (ডেস্কটপ), 50px (ট্যাবলেট), 40px (ফোন)
- শিরোনাম লেটার স্পেসিং: -10px (ডেস্কটপ), -4px (ট্যাবলেট), -3px (ফোন)
- হেডিং লাইনের উচ্চতা: 0.6em (ডেস্কটপ), 0.7em (ট্যাবলেট), 0.8em (ফোন)
একটি দ্বিতীয় সারি যোগ করুন
কলামের গঠন
নিচের কলামের কাঠামোর সাথে আগেরটির ঠিক নিচে আরেকটি সারি যোগ করা যাক:
সাইজিং
সারি সেটিংস খুলুন এবং সাইজিং সেটিংসে সর্বাধিক-প্রস্থ পরিবর্তন করুন।
- সর্বোচ্চ প্রস্থ: 1680px
ব্যবধান
সমস্ত নীচের মার্জিন এবং পরবর্তী প্যাডিং সরান।
- নিচের মার্জিন: 0px
- নীচের প্যাডিং: 0px
দ্বিতীয় কলামে একটি ইমেজ মডিউল যোগ করুন
একটি ইলাস্ট্রেশন আপলোড করুন
তারপর, আসুন একটি চিত্র মডিউল যোগ করি এবং আপনার পছন্দের একটি চিত্র আপলোড করি। এটি একটি পটভূমি চিত্রের মত দেখা উচিত.
সাইজিং
এখন মডিউল ’ এর ডিজাইন ট্যাবে স্যুইচ করুন এবং ইমেজে পূর্ণ প্রস্থ চাপুন।
- জোর করে পূর্ণ প্রস্থ: হ্যাঁ
ব্যবধান
পরবর্তী কিছু নেতিবাচক নীচে মার্জিন যোগ করুন.
- নিচের মার্জিন: -12%
অ্যানিমেশন
আসুন নিম্নলিখিত অ্যানিমেশন সেটিংস যোগ করে মডিউল সেটিংস সম্পূর্ণ করি:
- অ্যানিমেশন শৈলী: বিবর্ণ
- অ্যানিমেশন বিলম্ব: 3000ms
তৃতীয় সারি যোগ করুন
কলামের গঠন সংজ্ঞায়িত করুন
পরবর্তী এবং শেষ সারিতে যান। নিম্নলিখিত কলাম গঠন ব্যবহার করুন:
ব্যবধান
row’s ডিজাইন ট্যাবে যান এবং কিছু কাস্টম প্যাডিং মান যোগ করুন।
- শীর্ষ প্যাডিং: 10%
- নীচের প্যাডিং: 5%
- বাম প্যাডিং: 3%
- ডান প্যাডিং: 3%
বক্স ছায়া
তারপর, একটি সূক্ষ্ম বক্স-ছায়া নির্বাচন করুন।
- বক্স শ্যাডো ব্লার শক্তি: 80px
- ছায়ার রঙ: rgba(0,0,0,0.06)
অ্যানিমেশন
এবং নিম্নলিখিত অ্যানিমেশন যোগ করে সারি সেটিংস সম্পূর্ণ করুন:
- অ্যানিমেশন শৈলী: বিবর্ণ
- অ্যানিমেশন বিলম্ব: 3000ms
তৃতীয় সারিতে পাঠ্য মডিউল যোগ করুন
বিষয়বস্তু প্রদান
চলুন মডিউল যোগ না করা যাক. আমাদের প্রথম মডিউলটি কিছু বিষয়বস্তু সহ একটি পাঠ্য মডিউল প্রয়োজন।
টেক্সট সেটিংস
মডিউল ’ এর ডিজাইন ট্যাবে যান এবং সেই অনুযায়ী পাঠ্য সেটিংস পরিবর্তন করুন:
- টেক্সট ফন্ট: Lato
- পাঠ্যের আকার: 18px
- টেক্সট লেটার স্পেসিং: 1px
- টেক্সট লাইনের উচ্চতা: 2.7em
কলামে একটি বোতাম মডিউল যোগ করুন
পাঠ্য প্রদান করুন
শেষ মডিউলটি আমাদের প্রয়োজন একটি বোতাম মডিউল। আপনার পছন্দের একটি পাঠ্য লিখুন।
বোতাম সেটিংস
মডিউল ’ এর ডিজাইন ট্যাবে যান এবং বোতাম সেটিংসটি নিম্নরূপ পরিবর্তন করুন:
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
- বোতাম পাঠ্যের আকার: 16px
- বোতাম পাঠ্যের রঙ: #171cff
- বোতাম সীমানা প্রস্থ: 0px
- বোতাম সীমানা ব্যাসার্ধ: 0px
- বোতাম ফন্ট: মন্টসেরাট
- বোতাম ফন্ট শৈলী: বড় হাতের
ব্যবধান
তারপর, স্পেসিং সেটিংসের ভিতরে নিম্নলিখিত প্যাডিং মানগুলি প্রয়োগ করুন:
- শীর্ষ প্যাডিং: 2%
- নীচের প্যাডিং: 2%
- বাম প্যাডিং: 5%
- ডান প্যাডিং: 5%
বক্স ছায়া
নিম্নলিখিত বক্স ছায়া যোগ করে মডিউল সেটিংস সম্পূর্ণ করুন:
- বক্স শ্যাডো উল্লম্ব অবস্থান: 5px
- বক্স শ্যাডো স্প্রেড শক্তি: -2px
- ছায়ার রঙ: #171cff
2. শিরোনামে CSS ক্লাস যোগ করুন
প্রথম টেক্সট মডিউল খুলুন এবং টেক্সট ট্যাবে ক্লিক করুন
এখন যেহেতু আমাদের কাছে সমস্ত ডিজাইনের উপাদান রয়েছে, এখন আমাদের শিরোনামে উন্নত পাঠ্য অ্যানিমেশন যুক্ত করার সময় এসেছে। H1 কপি সহ পাঠ্য মডিউল খুলুন এবং পাঠ্য ট্যাবটি নির্বাচন করুন।
H1 ট্যাগে আইডি অ্যাট্রিবিউট যোগ করুন
H1-এর ভিতরে একটি কাস্টম আইডি অ্যাট্রিবিউট যোগ করুন।
- ID="হেডলাইন-কপি"
3. লেটারাইজ & অ্যানিমে লাইব্রেরি যোগ করুন
কলামে কোড মডিউল যোগ করুন
অ্যানিমেশন তৈরি করতে, আমরা letterize.js এবং anime.js লাইব্রেরি ব্যবহার করি। এই লাইব্রেরিগুলি যোগ করতে, আপনার শেষ সারি ’ এর কলামে একটি নতুন কোড মডিউল ঢোকান।
উভয় লাইব্রেরি অন্তর্ভুক্ত করুন
তারপরে, নিম্নলিখিত উত্সগুলি ধারণকারী দুটি ভিন্ন স্ক্রিপ্ট ট্যাগ যুক্ত করুন যা লাইব্রেরিতে ফিরে যায়:
- <script src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”></script>
- <script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>
4. অ্যানিমেশন কোড যোগ করুন
ব্যক্তিগত স্তরের চিঠির জন্য অ্যানিমেশন
এই টিউটোরিয়ালের শেষ অংশের জন্য, আমরা অ্যানিমেশন কোড যোগ করতে যাচ্ছি এবং এটি letterize.js এবং anime.js লাইব্রেরি উভয়ের জন্যই কাজ করবে। পাঠ্যগুলিতে একটি সুন্দর প্রভাব অর্জন করতে, আমরা দুটি ধরণের অ্যানিমেশন প্রয়োগ করতে যাচ্ছি। প্রথম অ্যানিমেশন প্রতিটি অক্ষরে পৃথকভাবে এবং ধারাবাহিকভাবে প্রয়োগ করা হয়। এটি letterize.js লাইব্রেরি দিয়ে অর্জন করা হয়। এই লাইব্রেরিটি, নীচের কোডের প্রথম অংশের সাথে একত্রে, আপনার প্রতিলিপিতে প্রতিটি অক্ষর একটি পৃথক স্প্যানের মধ্যে রাখে। এই স্প্যানগুলি, তারপর, অ্যানিমেশন প্রক্রিয়া জুড়ে আলাদাভাবে লক্ষ্যবস্তু করা হবে। নিশ্চিত করুন যে আপনি স্ক্রিপ্ট ট্যাগের মধ্যে নীচের কোডটি স্থাপন করেছেন।
jQuery(function ($) {
$(document).ready(function () {
var headlineCopy = new Letterize({
targets: "#headline-copy"
});
var animation = anime.timeline({
targets: headlineCopy.listAll(),
delay: anime.stagger(20),
loop: false
});
animation.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
}).add({
color: '#00FFF7',
}).add({
color: '#D2BEFB',
}).add({
color: '#171cff',
});
});
});প্রতিটি "অ্যাড" ফাংশন অ্যানিমেশনের একটি টাইমলাইনে একটি অ্যানিমেশন উপস্থাপন করে। এই অ্যানিমেশনগুলি প্রতিটি অক্ষরের জন্য এককভাবে প্রযোজ্য। লেটারাইজ এপিআই অনুসরণ করে আপনি এই অ্যাড ফাংশনগুলিকে পরিবর্তন করতে পারেন, নতুন যুক্ত করতে পারেন বা বর্তমানগুলি সরিয়ে ফেলতে পারেন, শুধু নিশ্চিত করুন যে শেষ অ্যাড ফাংশনটি শেষে ‘;’ দিয়ে সঠিকভাবে বন্ধ করা হয়েছে (যেমন আপনি উপরের কোডটিতে দেখতে পাচ্ছেন) )
আপনি এই "অ্যাড" ফাংশনের ভিতরে বিভিন্ন CSS বৈশিষ্ট্য যোগ করতে পারেন। আপনি anime.js ডকুমেন্টেশন উদাহরণগুলিতে বৈশিষ্ট্যগুলি এবং কীভাবে তারা ’ ব্যবহার করেছেন সে সম্পর্কে আরও জানতে পারেন।
এই টিউটোরিয়ালে, আমরা টাইমলাইন কীভাবে কাজ করে তা দেখানোর জন্য আমরা উদ্দেশ্যমূলকভাবে একাধিক অ্যানিমেশন যোগ করেছি, তবে আপনি আপনার নিজের প্রকল্পের জন্য আরও সূক্ষ্ম বা ছোট কিছু নিয়ে যেতে চাইতে পারেন।
বাক্যের জন্য অ্যানিমেশন
একবার আপনি ’ অ্যানিমেশনের প্রথম অংশ যোগ করলে, যা প্রতিটি অক্ষরকে পৃথকভাবে লক্ষ্য করে, আমরা আমাদের অ্যানিমেশনের দ্বিতীয় অংশে চলে যাব। এই অংশটি সম্পূর্ণরূপে সম্পূর্ণ অনুলিপিকে লক্ষ্য করে। অ্যানিমেশন পদ্ধতি উপরের মত একই; we’re একটি টাইমলাইন অ্যানিমেশনের ভিতরে সমগ্র মডিউল স্থাপন করছি। প্রতিটি অ্যাড ফাংশন সেই টাইমলাইনের ভিতরে একটি ভিন্ন অ্যানিমেশন উপস্থাপন করে। আপনি এই অ্যাড ফাংশনগুলিকে সংশোধন করতে পারেন, নতুনগুলি যোগ করতে পারেন বা বর্তমানগুলি সরাতে পারেন৷ নিশ্চিত করুন যে আপনি স্ক্রিপ্ট কোড শেষ হওয়ার আগে এই নতুন কোডটি রেখেছেন যেমন আপনি নীচের প্রিন্ট স্ক্রিনে লক্ষ্য করতে পারেন।
anime.timeline({loop: false}).add({targets: '#headline-copy',lineHeight: '1em',delay: '1500'}).add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});
স্প্যানের জন্য কাস্টম CSS যোগ করুন
এখন, যেহেতু আমরা ’ আমাদের প্রতিটি অক্ষরের জন্য একটি পৃথক স্প্যান তৈরি করেছি, তাই আমরা ’কে প্রতিটি স্প্যানের প্রদর্শন বৈশিষ্ট্য পরিবর্তন করতে হবে যাতে অক্ষরগুলি একে অপরের পাশে প্রদর্শিত হয়। এটি করার জন্য, আমরা আমাদের কোড মডিউলে কিছু CSS কোড যোগ করব। নিশ্চিত করুন যে আপনি স্টাইল ট্যাগের মধ্যে কোডটি স্থাপন করেছেন।
#headline-copy span {display: inline-block;}
চূড়ান্ত পূর্বরূপ
এখন যেহেতু আমরা ’ সমস্ত ধাপ অতিক্রম করেছি, চলুন ’ বিভিন্ন স্ক্রীনের মাপ জুড়ে ফলাফলের উপর একটি চূড়ান্ত নজর দেওয়া যাক।
সর্বশেষ ভাবনা
তাই এই পোস্ট জুড়ে, আমরা আপনাকে দেখিয়েছি কিভাবে আপনার শিরোনামে টেক্সট অ্যানিমেশন তৈরি করতে হয়। We’ve Divi-এর ভিতরে সম্পূর্ণ ডিজাইন তৈরি করেছে এবং letterize.js এবং anime.js লাইব্রেরির সাথে ফ্রেমওয়ার্ক একত্রিত করেছে। আপনি কি আপনার ব্লগে এই অ্যানিমেশনটি পরীক্ষা করবেন ? আপনার কাছে কি আমাদের সাথে শেয়ার করার জন্য অন্য কোনো অ্যানিমেশন আছে ? আমাদের জানান।
