ডিভিতে কীভাবে একটি স্প্লিট টেক্সট শাটার ইমেজ অ্যানিমেশন তৈরি করবেন

ছবি ওভারলে ওয়েবসাইট দর্শকদের একটি আকর্ষণীয় দেখার অভিজ্ঞতা প্রদান করার জন্য একটি অত্যন্ত সৃজনশীল মাধ্যম। কাস্টম অ্যানিমেশন এবং হোভারিং ইফেক্ট একটি ইমেজ প্রদর্শনের একটি দুর্দান্ত উপায়, এবং এটি আজকাল সকলের কাছে খুব জনপ্রিয়৷ আজকের টিউটোরিয়ালে, আমরা দেখব কিভাবে Divi- এর মাধ্যমে স্প্লিট টেক্সট অ্যানিমেশন দিয়ে সুন্দর ইমেজ ওভারলে তৈরি করা যায়।

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

চলুন দেরি না করে শুরু করা যাক।

পূর্বরূপ

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

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

আমরা শুরু করার আগে

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

ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে একটি নতুন পৃষ্ঠা তৈরি করুন এবং Divi নির্মাতার সাথে সম্পাদনার জন্য পৃষ্ঠাটি খুলুন। "স্ক্র্যাচ থেকে তৈরি করুন" চয়ন করুন এবং আমরা কাজ করতে প্রস্তুত!

বিভাগ 1: ডিজাইন তৈরি করা

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

যোগ করুন: সারি 1

সারি সেটিংস

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

• নর্দমার প্রস্থ: 2

কলাম সেটিংস

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

আমাদের কলামটিকে "শাটার কলাম" হিসাবে নির্বাচন করতে এবং পরে "হোভারে" অ্যানিমেট করতে কলামে CSS ক্লাস যোগ করুন।

• CSS ক্লাস: শাটার-কলাম অন-হোভার

এছাড়াও নিম্নলিখিত সমন্বয় করুন.

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

যোগ করুন: ইমেজ মডিউল

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

এখন ডিজাইন ট্যাবের অধীনে সারিবদ্ধকরণে সামান্য পরিবর্তন করুন।

• চিত্র প্রান্তিককরণ: কেন্দ্র

একটি শীর্ষ শাটার স্প্লিট পাঠ্য তৈরি করা হচ্ছে

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

একটি পাঠ্য সহ পাঠ্য মডিউল আপডেট করুন।

ডিজাইন ট্যাব খুলুন, এই সমন্বয় করুন।

• টেক্সট ফন্ট: Poppins
• টেক্সট ফন্ট ওজন: ভারী
• টেক্সট ফন্ট শৈলী: TT
• টেক্সট টেক্সটের রঙ: #ffffff
• পাঠ্য পাঠের আকার: 150px (ডেস্কটপ), 20vw (ট্যাবলেট এবং ফোন)
• টেক্সট লেটার স্পেসিং: -0.03em
• টেক্সট লাইন উচ্চতা: 0em
• পাঠ্য প্রান্তিককরণ: কেন্দ্র

এখন সাইজিং এবং স্পেসিং সেটিংস আপডেট করুন।

• প্রস্থ: 100%
• উচ্চতা: 50%
• মার্জিন: 0px নীচে

এখন, উন্নত ট্যাব থেকে নিম্নলিখিত CSS ক্লাস যোগ করুন।

• CSS ক্লাস: টপ-শাটার

পরবর্তীতে, আমরা কাস্টম কোড সহ ট্রান্সফর্ম অ্যানিমেশন চালু এবং বন্ধ করতে ক্লাসটি ব্যবহার করব। তারপর, প্রধান উপাদানে এই CSS কোড যোগ করুন।

display:flex;
align-items:flex-end;
justify-content:center;

আমাদের পাঠ্যকে অবস্থানে আনতে, আমাদের এই পরিবর্তনগুলি করতে হবে।

নিচের শাটার স্প্লিট টেক্সট তৈরি করা হচ্ছে

যেহেতু আমাদের টপ শাটার স্প্লিট টেক্সট হয়ে গেছে, তাই নিচের শাটার স্প্লিট টেক্সট তৈরি করতে টেক্সট মডিউলটি ডুপ্লিকেট করুন। আপনাকে কোনো CSS ক্লাস যোগ করতে হবে না; যেহেতু আমরা আগের মডিউলটি ক্লোন করেছি, সিএসএস ক্লাস ইতিমধ্যেই রয়েছে। কিন্তু আমাদের প্রধান উপাদানের CSS কোডে কিছু সমন্বয় করতে হবে।

display:flex;
align-items:flex-start;
justify-content:center;

"ফ্লেক্স-স্টার্ট" এর রেফারেন্স, পাঠ্যটি মডিউলের শীর্ষে উল্লম্বভাবে সারিবদ্ধ। আগের টেক্সট মডিউলে, আমরা লাইনের উচ্চতা 0 এ সেট করেছি, তাই পুরো টেক্সটের নীচের অর্ধেক দৃশ্যমান হবে।

একটি উল্লম্ব অফসেট সহ একটি পরম অবস্থান যোগ করুন।

• উল্লম্ব অফসেট: 50%

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

বিভাগ 2: কোড

আমাদের কাঠামোতে শাটার অ্যানিমেশন প্রভাব আনতে, আমাদের কিছু CSS এবং JS কোড দরকার। আমরা এর জন্য একটি কোড মডিউল ব্যবহার করব। ডান কলামের উপরে কোড মডিউল যোগ করুন।

সিএসএস কোড

একটি স্টাইল ট্যাগের ভিতরে নিম্নলিখিত CSS কোড পেস্ট করুন।

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

জেএস কোড

তারপর, একটি স্ক্রিপ্ট ট্যাগের ভিতরে নিম্নলিখিত JQuery কোড যোগ করুন।

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

বিভাগ 3: স্প্লিট টেক্সট শাটার অ্যানিমেশন ডিজাইন

এখন, আমরা আমাদের প্রথম শাটার অ্যানিমেশন তৈরি করতে আমাদের ডিজাইনের প্রথম বিভাগটি নকল করব।

যোগ করুন: শীর্ষ শাটার ট্রান্সফর্ম বৈশিষ্ট্য

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

শীর্ষ শাটারে রূপান্তর নকশা যোগ করতে, শীর্ষ শাটার পাঠ্য মডিউল সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:

• ট্রান্সফর্ম স্কেল (X এবং Y): ​​150%
• ট্রান্সফর্ম ট্রান্সলেট Y-অক্ষ: -101%
• ট্রান্সফর্ম অরিজিন: শীর্ষ কেন্দ্র

আপনি যদি সবকিছু সঠিকভাবে সম্পাদনা করেন, তাহলে উপরের শাটার টেক্সটটি আর দৃশ্যমান হবে না কারণ আমরা চাই অ্যানিমেশন ট্রানজিশনের পরে পুরো ছবিটি উন্মোচিত হোক।

যোগ করুন: নীচের শাটার ট্রান্সফর্ম বৈশিষ্ট্য

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

• ট্রান্সফর্ম স্কেল (X এবং Y): ​​150%
• ট্রান্সফর্ম ট্রান্সলেট Y-অক্ষ: 101%
• ট্রান্সফর্ম অরিজিন: নীচে কেন্দ্র

যোগ করুন: ট্রান্সফর্ম প্রপার্টি নিষ্ক্রিয় করতে CSS ক্লাস (প্রাথমিকভাবে)

আমরা ইতিমধ্যেই জানি যে শাটার অ্যানিমেশনের জন্য ট্রান্সফর্ম বৈশিষ্ট্য ডিজাইন করার পরে, আমরা একটি ছোট CSS ক্লাস ব্যবহার করে ট্রান্সফর্ম ডিজাইনগুলি অক্ষম করব। আমরা আগে যোগ করা কাস্টম CSS কোডের কারণে, ডিজাইনটি কোনো ট্রান্সফর্ম ডিজাইন ছাড়াই প্রদর্শিত হবে।

যোগ করুন: অন- ক্লিক কার্যকারিতা

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

• CSS ক্লাস: শাটার-কলাম অন-ক্লিক divi-transform-none

তাই ডিজাইন দেখতে এরকম হবে।

অ্যানিমেশন বিপরীত

এখন, আমরা যদি চাই, আমরা একটি অ্যানিমেশন তৈরি করতে পারি যেখানে পুরো চিত্রটি উন্মুক্ত থাকবে এবং যখন আমরা ঘোরাতে থাকি তখন পাঠ্যটি আসবে - যার অর্থ আমাদের এখন যা আছে তার ঠিক বিপরীত। "divi-transform-none" CSS ক্লাসটি সরিয়ে দিয়ে আমরা এই জাতীয় অ্যানিমেশনগুলি সহজেই পেতে পারি।

আরেকটি ডিজাইন

এখানে আমরা অন্য নকশা আছে.

শাটার আপডেট করুন

প্রতিটি শাটার টেমপ্লেট থেকে শীর্ষ এবং নীচের পাঠ্য মডিউল নির্বাচন করুন। তারপর উভয়ের জন্য উপাদান সেটিংস খুলুন এবং নিম্নলিখিত আপডেট করুন:

• পটভূমি: #ffffff
• টেক্সট টেক্সটের রঙ: #000000
• ব্লেন্ড মোড: স্ক্রীন

চূড়ান্ত নকশা

আমাদের চূড়ান্ত নকশা এই মত দেখাবে.

উপসংহার

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