طراحی اسلایدر تصویر متحرک SVG + کد

با سلام خدمت شما کاربران گرامی . امروز آموزش طراحی اسلایدر تصویر متحرک SVG رو برای شما عزیزان آماده کردیم که به همراه کد های آن در انتهای مطلب میتونید دانلود کنید . با هم به سراغ این آموزش میرویم و امیدواریم که شما نیز آن را دوست داشته باشید .

طراحی اسلایدر تصویر متحرک SVG + کد

ساختار html این اسلایدر از یک لیست ul تشکیل شده (ul.cd-slider) که شامل اسلایدها هست و دو عنصر اضافی لیست ما به نام های ( ul.cd-slider-navigation و ol.cd-slider-controls) برای حرکت اسلاید ها . هر آیتم لیست ما درون تگ ul.cd-slider میباشد که شامل عناصر <clipPath> و <image> است .

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

<div class="cd-slider-wrapper">
   <ul class="cd-slider" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
      <li class="visible">
         <div class="cd-svg-wrapper">
            <svg viewBox="0 0 1400 800">
               <title>Aimated SVG</title>
               <defs>
                  <clipPath id="cd-image-1">
                     <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
                  </clipPath>
               </defs>
          
               <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
            </svg>
         </div> <!-- .cd-svg-wrapper -->
      </li>

      <li>
         <div class="cd-svg-wrapper">
            <svg viewBox="0 0 1400 800">
               <!-- svg content here -->
            </svg>
         </div> <!-- .cd-svg-wrapper -->
      </li>

      <!-- other list items here -->
   </ul> <!-- .cd-slider -->

   <ul class="cd-slider-navigation">
      <li><a href="#0" class="next-slide">Next</a></li>
      <li><a href="#0" class="prev-slide">Prev</a></li>
   </ul> <!-- .cd-slider-navigation -->

   <ol class="cd-slider-controls">
      <li class="selected"><a href="#0"><em>Item 1</em></a></li>
      <li><a href="#0"><em>Item 2</em></a></li>
      <!-- other list items here -->
   </ol> <!-- .cd-slider-controls -->
</div> <!-- .cd-slider-wrapper -->

استایل اسلایدر :

ساختار استایل اسلایدر کاملا ساده است . تمام اسلاید ها یک opacity دارند که 0 است . یک position دارند که absolute است . همچنین مقادیر دیگر آنها top: 0 و left:0 میباشد . کلاس دیگری به نام visible برای نمایش تصویر اسلایدر فعال تعریف شده که با استفاده از آن تصویر فعال نمایش داده شده و دیگر تصاویر غیر فعال میشوند .

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}
.cd-slider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

شما میتوانید فایل های این اسلایدر را در ادامه مطلب دانلود کرده و آنها را تست و بررسی و حتی سفارشی سازی کنید . فایل اسلایدر در پایین همین نوشته وجود دارد . خوشحال میشویم که نظرات خود را در مورد مطلب طراحی اسلایدر تصویر متحرک SVG با ما در میان بگذارید .

منبع : codyhouse