درخواست پیش فاکتور

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

  • 3 دی 1397
  • 2 دیدگاه
  • مجید عابد
طراحی اسلایدر تصویر متحرک SVG + کد

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

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

 

 

نمایش دمو

 

 

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

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

 

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

 

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

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

 

 

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

منبع : codyhouse

 

امتیاز شما به این مقاله ؟
خیلی بدبدمعمولیخوبخیلی عالی
4 رای : 4٫25 از 5

عالی بود … بیشتر مطلب بزارید .. اکثرا رو دنبال میکنم

دکتر رنک لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme