ایجاد یک رابط کاربری Sliding Cards با HTML و CSS

در این آموزش، ما یک طراحی رابط کاربری کارت می سازیم و روش های مختلف CSS را برای آشکار کردن هموار محتوای هر کارت در شناور مورد بحث قرار می دهیم.

برای دیدن تمام جلوه ها، حتماً روی کارت های دموهای آینده حرکت کنید!

جزء کارت

اجزای کارت یک الگوی رابط کاربری مشترک هستند که اغلب برای نمایش پست های وبلاگ، توصیفات، محصولات و غیره استفاده می شوند.

بسیاری از اوقات، برای صرفه جویی در فضا، به ویژه در دستگاه های تلفن همراه، آنها را به عنوان بخشی از یک نوار لغزنده افقی خواهید یافت.

1. نشانه گذاری

برای شروع، در داخل یک ظرف، شش کارت را قرار می دهیم.

1

 class="cards">

2

  
 class="card">...    

3

  
 class="card">...    

4

  
 class="card">...    

5

  
 class="card">...    

6

  
 class="card">...    

7

  
 class="card">...    

8

هر کارت دارای ساختار زیر خواهد بود:

1

 class="card card-top">

2

   class="card-link" href="#0">

3

     class="card-img" width="900" height="900" src="IMG_URL" alt="">

4

    
 class="card-details">

5

6

        
 class="card-subtitle">...

7

        
 class="card-title">...

8

        
 class="card-content">...

9

10

      
 class="card-view-more">

11

        View more

12

        width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">

13

 d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />

14

15

16

17

18

2. سبک ها

ما از سبک های مقدماتی صرف نظر می کنیم و مستقیماً به سبک های مهم می پردازیم:

• ما به هر کارت یک ارتفاع ثابت تعیین شده توسط card-height متغیر CSS
• را .card-details عنصر کاملاً در موقعیت قرار می گیرد و در بالای تصویر قرار می گیرد. با این حال، به طور پیش فرض، فقط یک بخش، به ویژه عنوان و زیرنویس آن باید قابل مشاهده باشد. برای رسیدن به این هدف، یک ارتفاع استاتیک اولیه نیز برای آن تعریف می کنیم .card-details عنصر تعیین شده توسط initial-visible-card-height متغیر CSS لطفاً توجه داشته باشید که این ارتفاع و نقاط شکست برای محتوای ما در اینجا کار می کنند. در مورد شما، ممکن است چیزی متفاوت بخواهید.
• تا زمانی که ماوس را روی یک کارت نگه داریم، ارتفاع آن را متحرک خواهیم کرد .card-details عنصر تا 100 درصد، بنابراین ما به یک انیمیشن اسلاید از بالا به پایین دست خواهیم یافت.

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

1

/*CUSTOM VARIABLES HERE*/

2

3

.card {

4

  position: relative;

5

  margin: 0;

6

  overflow: hidden;

7

  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);

8

  height: var(--card-height);

9

}

10

11

.card-details {

12

  display: flex;

13

  flex-direction: column;

14

  justify-content: space-between;

15

  position: absolute;

16

  top: 0;

17

  left: 0;

18

  right: 0;

19

  bottom: 0;

20

  background: rgba(193, 18, 31, 0.7);

21

  color: var(--white);

22

  padding: 40px;

23

  height: var(--initial-visible-card-height);

24

  transition: all 0.3s;

25

}

26

27

.card-link:hover .card-details {

28

  height: 100%;

29

  background: var(--white);

30

}

و نسخه ی نمایشی مرتبط - حتماً آن را در صفحه بزرگتر مشاهده کنید:

تبدیل ملک

اما اگر بخواهیم جهت انیمیشن را برعکس کنیم چه؟ در چنین حالتی، تنها کاری که باید انجام دهیم این است که انیمیشن را متحرک سازیم transform ویژگی CSS به جای height یک و مقدار آن را تنظیم کنید transform-origin دارایی به bottom.

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

1

/*CUSTOM VARIABLES*/

2

3

.card-details {

4

  transform: translateY(calc(100% - var(--initial-visible-card-height)));

5

  transform-origin: bottom;

6

}

7

8

.card-link:hover .card-details {

9

  transform: none;

10

}

و نسخه ی نمایشی مرتبط - حتماً آن را در صفحه بزرگتر مشاهده کنید:

ویژگی Clip-Path

از طرف دیگر، ما می توانیم با استفاده از CSS به افکت های فوق الذکر دست پیدا کنیم clip-path ویژگی. ما همچنین می توانیم استفاده کنیم circle() عملکرد این ویژگی برای ایجاد برخی افکت های جالب است.

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

1

.card-details {

2

  clip-path: circle(15% at 0 0);

3

  transition: all 0.4s;

4

}

5

6

.card-top-right .card-details {

7

  clip-path: circle(15% at 100% 0);

8

}

9

10

.card-bottom-right .card-details {

11

  clip-path: circle(15% at 100% 100%);

12

}

13

14

.card-bottom-left .card-details {

15

  clip-path: circle(15% at 0 100%);

16

}

17

18

.card-details * {

19

  opacity: 0;

20

}

21

22

.card-link:hover .card-details {

23

  clip-path: circle(150% at 100% 100%);

24

}

25

26

.card-link:hover .card-details * {

27

  opacity: 1;

28

}

و نسخه ی نمایشی مرتبط - حتماً آن را در صفحه بزرگتر مشاهده کنید:

نتیجه

این همه، مردم! در این آموزش کوتاه به روش های مختلف CSS برای ایجاد چیدمان کارت با محتوای متحرک پرداختیم. این نوع چیدمان هنگام کار با ارتفاع های ثابت دارای محدودیت هایی است، بنابراین از آن آگاه باشید و تنها در صورتی از آن استفاده کنید که بتوانید محتوای کارت را کنترل کنید.

اگر به چیزی زیباتر نیاز دارید، جاوا اسکریپت را در حلقه قرار دهید.

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

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