اسلایدر کارت وبلاگ متحرک با HTML و CSS

منتشر شده در تاریخ : 27 تیر 1401

امروز در این آموزش ویدیویی از سری آموزش HTML و CSS یاد خواهید گرفت که چگونه یک اسلایدر کارت وبلاگ متحرک با استفاده از HTML و CSS ایجاد کنید. این انیمیشن اسلایدر به طور کامل بر اساس HTML CSS است. همچنین این پروژه به صورت کامل ریسپانسیو بوده و برای استفاده در موبایل و دستکتاپ نیز بهینه شده است.

اسلایدرهای بلاگ یا تصویر (همچنین به عنوان چرخ فلک تصویر یا نمایش اسلاید نیز شناخته می شود) می تواند راهی آسان برای نمایش چندین تصویر، ویدیو یا گرافیک در وب سایت شما باشد. ایده نمایش یک تصویر بزرگ، زیبا و پر زرق و برق می تواند بسیار جذاب باشد. تصاویر جذاب می توانند بازدیدکنندگان جدیدی را وارد سایت شما کنند و فوراً توجه آنها را به خود جلب کنند.

در این پروژه (کارت بلاگ اسلایدر متحرک)، ابتدا در صفحه وب، یک پس زمینه گرادیان با جعبه ظرف سفید وجود دارد. و این کادر یک تصویر در سمت چپ و تعدادی متن، یک دکمه و کنترل های اسلایدری در سمت پایین وجود دارد. از این دکمه ها برای اسلاید کردن کارت های پیش نمایش استفاده می شود. سه کارت مختلف با یک تصویر متفاوت وجود دارد و هنگامی که روی دکمه کلیک می کنید، هر کارت به آرامی اسلاید میشود و کارت دیگری را نشان می دهد.

شما می توانید از این مینی پروژه در وب سایت ها، پروژه ها و صفحات HTML خود استفاده کنید. امروزه هر وب سایتی دارای کارت یا نمایش اسلاید تصویری برای نمایش محصولات، چندین تصویر، ویدیو یا گرافیک در وب سایت خود است. اگر این پروژه (کارت بلاگ اسلایدر متحرک) را دوست دارید و می خواهید کدهای منبع را دریافت کنید. به راحتی می توانید کدهای منبع این پروژه را از زیر برای خود کپی کنید.

فایل‌های HTML مورد نیاز

در زیر می‌توانید کدهای Html مورد نیاز این پروژه را مشاهده کنید، همان طور که در ویدیو مشاهده کردید برای استفاده از این کدها باید ابتدا یک پوشه ساخته و آن را در ادیتور VS CODE باز کنید، سپس یک فایل با نام index.html ساخته و کدهای زیر را در آن کپی و پیس کنید.

دقت کنید که اگر می‌خواهید کدنویسی HTML و CSS را یاد بگیرید کدها را همراه با ویدیوی آموزشی خودتان تایپ کنید، فقط در این صورت است که مطالب این آموزش را به صورت کامل درک خواهید کرد.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Navid Dev - Slider Blog Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="blog-card">
      <input type="radio" name="select" id="tap-1" checked />
      <input type="radio" name="select" id="tap-2" />
      <input type="radio" name="select" id="tap-3" />
      <input type="checkbox" id="imgTap" />
      <div class="sliders">
        <label for="tap-1" class="tap tap-1"></label>
        <label for="tap-2" class="tap tap-2"></label>
        <label for="tap-3" class="tap tap-3"></label>
      </div>
      <!-- Slide 1 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1642427749670-f20e2e76ed8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
            alt=""
            class="img-1"
          />
        </label>
        <div class="content content-1">
          <span>28 May 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">1Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>

        <!-- Slide 2 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1635492491273-455af7728453?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=960&q=80"
            alt=""
            class="img-2"
          />
        </label>
        <div class="content content-2">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">2Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate!</p>
<button>Read More</button>
        </div>
        <!-- Slide 3 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1621360841013-c7683c659ec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
            alt=""
            class="img-3"
          />
        </label>
        <div class="content content-3">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">3Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>
      </div>
    </div>
  </body>
</html>

کدهای CSS پروژه

در ادامه در همان پروژه خود یک فایل style.css ساخته و کدهای زیر را درون آن تایپ کنید، یادتان باشد که برای استفاده از فونت های رایگان انگلیسی می‌توانید از سایت عالی گوگل فونت استفاده کنید.

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(147deg, #f6b323 0%, #f23b26 74%);
}
img {
  max-width: 100%;
}
.blog-card {
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 10px 50px rgba(252, 56, 56, 0.3);
}
.inner-part {
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: 0.1s ease-in;
}
.inner-part .img {
  height: 260px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
}

#imgTap:checked ~ .inner-part .img {
  height: 370px;
  width: 850px;
  z-index: 99;
  margin-top: 10px;
  transition: 0.3s 0.2s ease-in;
}
.img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: 0.6s;
}
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 {
  opacity: 1;
  transition-delay: 0.2s;
}
.content {
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: 0.6s;
}

#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 {
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: 0.3s;
}
.content span {
  display: block;
  color: #7b7992;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 500;
}
.content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.content .text {
  color: #4e4a67;
  font-size: 19px;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-align: justify;
}
.content button {
  display: inline-flex;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fd3838;
}
.sliders {
  position: absolute;
  bottom: 25px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 12;
}
#imgTap:checked ~ .sliders {
  display: none;
}
.sliders .tap {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}
.sliders .tap:hover {
  background: #ccc;
}
.sliders .tap::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: left;
}
input {
  display: none;
}
#tap-1:checked ~ .sliders .tap-1::before,
#tap-2:checked ~ .sliders .tap-2::before,
#tap-3:checked ~ .sliders .tap-3::before {
  transform: scaleX(1);
  width: 100%;
}
#imgTap:checked ~ .inner-part .content {
  display: none;
}
/* Responsive */
@media screen and (max-width: 50rem) {
  .inner-part {
    flex-direction: column;
  }
  .blog-card {
    height: 560px;
  }
  .sliders {
    left: 50%;
  }
  .content {
    margin-left: 0;
    width: auto;
    margin-top: 1rem;
  }
  .text {
    text-align: left !important;
  }
  #imgTap:checked ~ .inner-part .img {
    height: 560px;
    width: 100%;
    top: 95px;
    position: relative;
  }
}

نحوه استفاده از کدها

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

جمع بندی

در انتها امیدواریم که آموزش طراحی اسلایدر کارت وبلاگ متحرک با HTML و CSS برای شما عزیزان مفید و کاربردی بوده باشد، اگر سوالی در رابطه با این آموزش دارید، در بخش کامنت‌ها با ما در ارتباط باشید.

5/5 - (1 امتیاز)

نظرات در “اسلایدر کارت وبلاگ متحرک با HTML و CSS”

aa.mohammad00 میگوید:
سلام استاد چجوری میشه بهش زمان داد؟

در
برای پاسخ دادن وارد شوید
- پشتیبانی میگوید:
  درود، اگر بخواهید زمان را اضافه کنید باید توسط کدهای جاوا اسکریپت این کار را انجام دهید.
  
  در
  برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

آموزش طراحی فرم لاگین با HTML و CSS