ডিভি ইমেজ গ্যালারিতে কীভাবে অসামান্য অ্যানিমেশন প্রভাব আনতে হয়

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

পূর্বরূপ

আমরা সম্পূর্ণ টিউটোরিয়াল শেষ করার পরে আমাদের গ্যালারিটি কেমন হবে।

একটি Divi ইমেজ গ্যালারিতে অ্যানিমেশন যোগ করুন

পার্ট 1: গ্যালারি পেজ লেআউট ডিজাইন

বিভাগ

প্রথমে, আমরা প্রাথমিক বিভাগের জন্য সেটিংস খুলব এবং উল্লিখিত পরিবর্তন করব।

• ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট বাম রঙ: #15d6c2
• ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট ডান রঙ: #000000
• স্টার্ট পজিশন: 50%
• শেষ অবস্থান: 25%

আমরা ডিজাইন ট্যাবে প্যাডিং সেটিংস আপডেট করব।

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

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

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

• প্যাডিং: 0px উপরে, 0px নীচে, 0px বাম, 0px ডান

তারপরে আমরা উন্নত ট্যাবে দৃশ্যমানতা থেকে ওভারফ্লো সেটিংস আপডেট করব।

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

সারি 1 যোগ করা হচ্ছে

আমরা একটি এক-কলামের সারি যুক্ত করব যা আমাদের পৃষ্ঠার শিরোনাম ধরে রাখবে।

তারপর সারি সেটিংস থেকে, প্যাডিং আপডেট করা যাক:

• প্যাডিং: 15px উপরে, 15px নীচে

টেক্সট মডিউল যোগ করুন

পরবর্তী ধাপটি সারিতে একটি পাঠ্য মডিউল যোগ করা হচ্ছে। এই মডিউলটি পৃষ্ঠার শিরোনাম হিসাবে কাজ করবে।

এখন আপনার পছন্দের বিষয়বস্তু যোগ করুন এবং ছবির দেখানো মেনু থেকে শিরোনাম 1 নির্বাচন করুন।

তারপরে আমরা ডিজাইন বিভাগে চলে যাব এবং শিরোনামের জন্য নিম্নলিখিত সেটিংস আপডেট করব:

• শিরোনাম ফন্ট: Poppins
• শিরোনাম পাঠ্য প্রান্তিককরণ: কেন্দ্র
• শিরোনাম পাঠ্যের রঙ: #ffffff
• শিরোনাম পাঠ্যের আকার: 100px (ডেস্কটপ), 80px (ট্যাবলেট), 60px (ফোন)

সারি 2 যোগ করা

আমরা একই বিভাগে আরেকটি সারি যোগ করব। এটি আমাদের গ্যালারি মডিউল হিসাবে কাজ করবে।

সারি সেটিংস থেকে, সারিতে একটি কালো পটভূমির রঙ যোগ করুন।

• পটভূমির রঙ: #000000

ডিজাইন ট্যাবে আমাদের অনেক আপডেট করতে হবে। তাই সাবধানে অনুসরণ করুন। প্রথমে সাইজ সেটিংসে যান।

• কাস্টম গটার প্রস্থ ব্যবহার করুন: হ্যাঁ
• নর্দমার প্রস্থ: 1
• প্রস্থ: 95%
• ন্যূনতম উচ্চতা: 80vh

এখন, সারিতে কিছু প্যাডিং যোগ করুন।

• প্যাডিং: 0px উপরে, 0px নীচে

এটা কিছু বক্স-ছায়া যোগ করার সময়.

• বক্স শ্যাডো: স্ক্রিনশট দেখুন
• বক্স শ্যাডো উল্লম্ব অবস্থান: 0px
• বক্স শ্যাডো অনুভূমিক অবস্থান: 0px
• বক্স শ্যাডো স্প্রেড শক্তি: 70px
• ছায়ার রঙ: #000000

পার্ট 2: গ্যালারি মডিউল ডিজাইন

আমাদের ডিজাইনে গ্যালারি মডিউল যোগ করার সময় এসেছে।

গ্যালারি মডিউলের বিষয়বস্তু ট্যাব থেকে। ন্যূনতম 25টি ছবি যোগ করুন। এটি একটি অসামান্য অ্যানিমেশন প্রভাব ইমেজ জন্য একটি চমত্কার ভাল পরিমাণ.

ছবি আপলোড করার পরে, নিম্নলিখিত পরিবর্তনগুলি করুন:

• ছবির সংখ্যা: 25
• শিরোনাম এবং ক্যাপশন দেখান: না
• পৃষ্ঠা সংখ্যা দেখান: হ্যাঁ

ওভারলে এবং পেজিনেশন ডিজাইন

ডিজাইন ট্যাব থেকে ওভারলে সেটিং আপডেট করুন:

• ওভারলে আইকনের রঙ: #ffffff
• ওভারলে পটভূমির রঙ: rgba(22,215,195,0.55)
• ওভারলে আইকন: প্লাস আইকন (স্ক্রিনশট দেখুন)

এটি পৃষ্ঠা সংখ্যা সেটিংসের সময়।

• পৃষ্ঠা সংখ্যা টেক্সট প্রান্তিককরণ: কেন্দ্র
• পেজিনেশন টেক্সট সাইজ: 2em
• পৃষ্ঠা সংখ্যা লাইন উচ্চতা: 2em
• প্যাডিং: 10px উপরে, 10px নীচে, 5px বাম, 5px ডান

উন্নত স্টাইলিং

আমরা এখন গ্যালারির জন্য কিছু উন্নত স্টাইলাইজেশন করব। প্রথমে, ’ এর গ্যালারি আইটেমে কিছু CSS যোগ করুন নিম্নরূপ:

গ্যালারি আইটেম CSS (ডেস্কটপ)

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

গ্যালারি আইটেম CSS (ট্যাবলেট)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

গ্যালারি আইটেম CSS (মোবাইল)

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

গ্যালারি পেজিনেশন বক্সে নিম্নলিখিত CSS কোড যোগ করুন।

border-top: 0px !important;
padding-top: 20px; 

এছাড়াও, এই CSS কোডটি পেজিনেশন সক্রিয় পৃষ্ঠা বক্সে রাখুন।

color: #15D6C2 !important;
font-weight: bold;

এখন আমরা এটি সংরক্ষণ করার আগে গ্যালারি মডিউলে একটি CSS ক্লাস যোগ করুন।

• CSS ক্লাস: et-anime-gallery

পার্ট 3: JQuery এবং Anime.js এর সাথে অ্যানিমেশন ইফেক্ট যোগ করা

আমরা আমাদের নকশা সম্পন্ন. এটি আরও আকর্ষণীয় করতে সহজ কোডিং যোগ করার সময়। এজন্য আমরা গ্যালারি মডিউলের অধীনে একটি কোড মডিউল যোগ করব।

সিএসএস

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

/*hide prev and next pagination links*/ 
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  } 

Anime.js লাইব্রেরি

CSS কোডের নিচে, আমাদের ডিজাইনে Anime.js লাইব্রেরি যোগ করতে স্ক্রিপ্ট ট্যাগে এই উৎসটি যোগ করুন।

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

jQuery কোড

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

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#15D6C2", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

সংরক্ষণ করুন এবং এটি বন্ধ করুন।

ফাইনাল লুক

আমাদের গ্যালারিটি দেখতে এমনই, সুন্দর তাই না।

চূড়ান্ত শব্দ

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