با CSS Grid و GSAP یک نمایش اسلاید جاوا اسکریپت نامتقارن بسازید
انتشار: تیر 27، 1403
بروزرسانی: 23 خرداد 1404

با CSS Grid و GSAP یک نمایش اسلاید جاوا اسکریپت نامتقارن بسازید


بدون هیچ مقدمه ای، در اینجا چیزی است که ما می خواهیم ایجاد کنیم:

لطفاً توجه داشته باشید که نمایش اسلاید برای دستگاه های تلفن همراه بهینه نشده است. چیدمان نامتقارن/شکسته روی صفحه نمایش های بزرگ بهترین کار را دارد، بنابراین حتماً نسخه نمایشی را از یک دستگاه بزرگ مشاهده کنید. برای دستگاه های تلفن همراه، می توانید انتخاب کنید که یک نمایش اسلاید استاندارد با یک تصویر واحد و یک پوشش با مقداری متن بالای آن داشته باشید.

این یک آموزش مقدماتی نیست. در طول سال ها، من آموزش های مختلفی را منتشر کرده ام که در آن GSAP را با جزئیات ارائه می دهم و در مورد چگونگی متحرک کردن clip-path دارایی اگر به اندازه کافی با این موارد آشنا نیستید یا نیاز به تجدید نظر دارید، توصیه می کنم قبل از حرکت به جلو، آموزش های زیر را بررسی کنید.

1. با نشانه گذاری HTML شروع کنید

داخل ظرفی قرار می دهیم:

  • لیستی از اسلایدها
  • عنصری که فهرست اسلاید فعال را نمایش می دهد.
  • فلش های ناوبری

فرض می کنیم که هر اسلاید خانه/آپارتمان اجاره ای را توصیف می کند و شامل یک عنوان، تعدادی تصویر و یک دکمه فراخوان است.

موقعیت این عناصر متفاوت خواهد بود و به سه مورد بستگی دارد layout-* کلاس ها (layout-a، layout-b، layout-c).

به طور پیش فرض، اولین اسلاید به لطف is-active کلاس

در اینجا نشانه گذاری مورد نیاز به طور کلی آمده است:

1
 class="slides-wrapper">
2
  
3
    
  •  class="slide layout-a is-active">...
    • 
    4
        
  •  class="slide layout-b">...
    • 
    5
        
  •  class="slide layout-c">...
    • 
    6
      
    7
      
     class="counter">1 / 3
    
    8
      
     class="arrows-wrapper">
    9
        
    10
        
    11
      
    12

    و به طور خاص تر، نشانه گذاری داخل هر اسلاید به شکل زیر خواهد بود:

    1
     class="img-wrapper img1-wrapper">
    2
       width="" height="" src="IMG_URL" alt=""> 
    3
    
    4
     class="img-wrapper img2-wrapper">
    5
       width="" height="" src="IMG_URL" alt="">
    6
    
    7
     class="img-wrapper img3-wrapper">
    8
       width="" height="" src="IMG_URL" alt="">
    9
    
    10
     class="img-wrapper img4-wrapper">
    11
       width="" height="" src="IMG_URL" alt="">
    12
    
    13
     class="title text">...
    
    14
     href="" class="btn-book text">...

    2. CSS را اضافه کنید

    طبق معمول، بیایید روی سبک های کلیدی تمرکز کنیم - فعلاً سبک های مقدماتی را ترک می کنیم.

    ابتدا از CSS Grid برای چیدن همه اسلایدها استفاده می کنیم. در هر زمان، فقط یکی با is-active کلاس ظاهر می شود. 

    1
    .slides-wrapper .slides {
    2
      display: grid;
    3
    }
    4
    
    5
    .slides-wrapper .slide {
    6
      grid-area: 1/1;
    7
      opacity: 0;
    8
      visibility: hidden;
    9
    }
    10
    
    11
    .slides-wrapper .slide.is-active {
    12
      opacity: 1;
    13
      visibility: visible;
    14
    }

    هر اسلاید یک ظرف شبکه با 20 ستون و ردیف خواهد بود. به علاوه، هر ردیف دارای یک 5vh ارتفاع

    شبکه اسلایدشبکه اسلایدشبکه اسلاید
    1
    .slides-wrapper .slide {
    2
      display: grid;
    3
      grid-template-rows: repeat(20, 5vh);
    4
      grid-template-columns: repeat(20, 1fr);
    5
    }

    در مرحله بعد، هر آیتم اسلاید بر اساس آن در مکان متفاوتی قرار می گیرد grid-row و grid-column ارزش ها علاوه بر این، موارد برخی از اسلایدها یکسان خواهند بود grid-row-end و grid-column-end ارزش ها اینها همه دلخواه هستند و شما می توانید آنها را به دلخواه تغییر دهید.

    1
    .slides-wrapper .layout-a .img1-wrapper {
    2
      grid-row: 1 / -1;
    3
      grid-column: 1 / span 7;
    4
    }
    5
    
    6
    .slides-wrapper .layout-a .img2-wrapper {
    7
      grid-row: 6 / span 5;
    8
      grid-column: 16 / -1;
    9
    }
    10
    
    11
    .slides-wrapper .layout-a .img3-wrapper {
    12
      grid-row: 8 / span 9;
    13
      grid-column: 10 / span 5;
    14
    }
    15
    .slides-wrapper .layout-a .img4-wrapper {
    16
      grid-row: 15 / -1;
    17
      grid-column: 17 / -1;
    18
    }
    19
    .slides-wrapper .layout-a .title {
    20
      grid-row-start: 7;
    21
      grid-column-start: 1;
    22
    }
    23
    
    24
    .slides-wrapper .layout-a .btn-book {
    25
      grid-row: 3;
    26
      grid-column-start: 11;
    27
    }

    تصاویر کاملاً در داخل سلول خود به لطف object-fit: cover ویژگی فوق العاده مفید CSS.

    1
    .slides-wrapper img {
    2
      width: 100%;
    3
      height: 100%;
    4
      object-fit: cover;
    5
    }

    در نهایت، موارد مربوط به ناوبری کاملاً در لبه های چپ و راست نمایش اسلاید قرار می گیرند.

    1
    .slides-wrapper .counter,
    2
    .slides-wrapper .arrows-wrapper {
    3
      position: absolute;
    4
      top: 20px;
    5
    }
    6
    
    7
    .slides-wrapper .counter {
    8
      left: 20px;
    9
    }
    10
    
    11
    .slides-wrapper .arrows-wrapper {
    12
      right: 20px;
    13
    }

    3. جاوا اسکریپت را اضافه کنید

    در این مرحله، ما آماده هستیم تا تعامل را به نمایش اسلاید خود اضافه کنیم.

    هر بار که روی یک پیکان ناوبری کلیک می کنیم، اقدامات زیر را انجام می دهیم:

    1. اسلاید فعال و موارد آن را بگیرید.
    2. اطمینان حاصل کنید که تمام عناصر متحرک نمایش اسلاید ما با استفاده از متد set() GSAP بلافاصله قابل مشاهده هستند. ما این کار را انجام می دهیم تا سبک های خطی قبلی که در طول دوچرخه سواری اعمال شده اند را لغو کنیم.
    3. بررسی کنید تا ببینید روی کدام دکمه کلیک شده است. اگر این دکمه بعدی باشد، اسلاید فعال بعدی را به عنوان اسلایدی که بلافاصله بعد از اسلاید فعال فعلی می آید تنظیم می کنیم. اگر چنین اسلایدی وجود نداشته باشد، اسلاید بعدی به اسلاید اول تبدیل می شود. به همین ترتیب، اگر روی دکمه قبلی کلیک شود، اسلاید بعدی را به عنوان اسلایدی که بلافاصله قبل از اسلاید فعال فعلی قرار می گیرد، تنظیم می کنیم. اگر چنین اسلایدی وجود نداشته باشد، اسلاید بعدی آخرین اسلاید می شود.
    4. با تمام این دانش در محل، ما تماس بگیرید tl() تابعی که در آن همه آیتم های نمایش اسلاید را متحرک می کنیم.

    در اینجا کد جاوا اسکریپت مورد نیاز است:

    1
    ...
    2
    
    3
    btnArrows.forEach(function (btn) {
    4
      btn.addEventListener("click", function (e) {
    5
        // 1
    6
        const activeSlide = slidesWrapper.querySelector(".slide.is-active");
    7
        const activeSlideImgs = activeSlide.querySelectorAll("img");
    8
        const activeSlideText = activeSlide.querySelectorAll(".text");
    9
        let nextSlide = null;
    10
    
    11
        // 2
    12
        gsap.set(slideImgs, { clipPath: "inset(0 0 0 0)" });
    13
        gsap.set(slideTexts, { opacity: 1 });
    14
    
    15
        // 3
    16
        if (e.currentTarget === btnArrowNext) {
    17
          nextSlide = activeSlide.nextElementSibling
    18
            ? activeSlide.nextElementSibling
    19
            : firstSlide;
    20
        } else {
    21
          nextSlide = activeSlide.previousElementSibling
    22
            ? activeSlide.previousElementSibling
    23
            : lastSlide;
    24
        }
    25
        // 4
    26
        tl(nextSlide, activeSlide, activeSlideImgs, activeSlideText);
    27
      });
    28
    });

    البته، اگر می خواهیم ایمن تر باشیم، می توانیم منتظر بمانیم تا زمانی که تمام دارایی های صفحه از طریق load رویداد

    داخل tl() تابع ما یک جدول زمانی GSAP ایجاد می کنیم که همه عناصر اسلاید فعال فعلی را به طور همزمان پنهان می کند. مهمتر از همه، تصاویر آن با متحرک سازی ناپدید می شوند clip-path دارایی نکته جالب اینجا این است که حرکت انیمیشن از یک انتخاب مسیر کلیپ تصادفی حاصل می شود.

    به محض اینکه این جدول زمانی تمام شد، جدول زمانی دیگری را ثبت می کنیم که عناصر اسلاید فعال جدید را یکباره دوباره نشان می دهد. اگرچه این بار، تصاویر مرتبط با یک انیمیشن اسلاید مخالف ظاهر می شوند. برای مثال، اگر تصاویر قبلی از چپ به راست بریده شوند، از راست به چپ ظاهر می شوند.

    این هم امضای این تابع:

    1
    function tl(
    2
      nextActiveEl,
    3
      currentActiveSlide,
    4
      currentActiveSlideImgs,
    5
      currentSlideActiveText
    6
    ) {
    7
      const tl = gsap.timeline({ onComplete });
    8
    
    9
      const randomClipPathOption = Math.floor(
    10
        Math.random() * clipPathOptions.length
    11
      );
    12
    
    13
      tl.to(currentActiveSlideImgs, {
    14
        clipPath: clipPathOptions(randomClipPathOption)
    15
      }).to(
    16
        currentSlideActiveText,
    17
        {
    18
          opacity: 0,
    19
          duration: 0.15
    20
        },
    21
        "-=0.5"
    22
      );
    23
    
    24
      function onComplete() {
    25
        currentActiveSlide.classList.remove(ACTIVE_CLASS);
    26
        nextActiveEl.classList.add(ACTIVE_CLASS);
    27
        counterSpan.textContent = slidesArray.indexOf(nextActiveEl) + 1;
    28
        
    29
        const nextSlideImgs = nextActiveEl.querySelectorAll("img");
    30
        const nextSlideText = nextActiveEl.querySelectorAll(".text");
    31
        const tl = gsap.timeline();
    32
    
    33
        tl.from(nextSlideImgs, {
    34
          clipPath: clipPathOptions(randomClipPathOption)
    35
        }).from(
    36
          nextSlideText,
    37
          {
    38
            opacity: 0,
    39
            duration: 0.15
    40
          },
    41
          "-=0.5"
    42
        );
    43
      }
    44
    }

    پشتیبانی از صفحه کلید را اضافه کنید

    فقط برای افزایش عملکرد نمایش اسلاید خود، پشتیبانی از پیمایش صفحه کلید را اضافه می کنیم. که گفت، هر بار سمت چپ (←) یا درست است (→) کلیدهای جهت دار فشار داده می شود، به ترتیب یک کلیک روی پیکان های پیمایش قبلی و بعدی راه اندازی می کنیم.

    این هم کد مربوطه:

    1
    document.addEventListener("keyup", (e) => {
    2
      console.log(e.key);
    3
      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
    4
        // left arrow
    5
        if (e.key === "ArrowLeft") {
    6
          btnArrowPrev.click();
    7
        } else {
    8
          // right arrow
    9
          btnArrowNext.click();
    10
        }
    11
      }
    12
    });

    نتیجه گیری

    انجام شد! در طول این آموزش، ما واقعا خلاق بودیم و یاد گرفتیم که یک نمایش اسلاید متحرک GSAP بسازیم که اسلایدهای آن از طرح بندی های نامتقارن منحصر به فرد مختلف تشکیل شده است.

    امیدواریم که نسخه نمایشی حاصل را دوست داشته باشید و از آن به عنوان الهام بخش برای ایجاد نمایش اسلایدهای جاوا اسکریپت شبکه شکسته خود استفاده کنید 🙏.

    مثل همیشه، خیلی ممنون که خواندید!


    منبع: https://webdesign.tutsplus.com/build-an-asymmetric-javascript-slideshow-with-css-grid-gsap--cms-108846t
    نویسنده: تیم تحریریه روحانی نژاد