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

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

دانلود فایل | دمو

بوجود آورد ساختار 

ساختار html این اسلایدر از یک المنت ul تشکیل شده (ul.cd-slider) که حاوی کل اسلایده ، به علاوه دو المنت لیست دیگه برای ناوبری اسلاید مثل ( ul.cd-slider-navigation و ol.cd-slider-controls) .

هر لیست آتیم داخل المنت (ul.cd-slider) از یک المنت svg تشکیل شده که داخل svg یک المنت <clipPath> قرار داده میشه ( مورد استفاده برای تغییر شکل تصویر در هنگام قطع شدن ) و همینطور یک المنت <image> که متصل میشه به <clipPath> داخل svg . در زیر میتونید کد ها رو ببینید .

<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 و left برابر 0 قرار داده میشه . کلاس .visible به اسلایدی که انتخاب شده باشه برای نمایش اضافه میشه . البته بعد از پایان انیمیشن به یک اسلاید اضافه میشه و اسلاید مورد نظر رو قابل نمایش میکنه . در حالی که کلاس .is-animating به اسلایدی که انتخاب شده باشه اضافه میشه تا ما بتونیم افکت جالبی که برای انتقال اسلایدر ها ساخته شده مشاهده کنیم . 

نکته : ما برای رسپانسیو کردن svg از هک padding استفاده کردیم که میتونید در این مقاله در مورد جزئیات این روش مطالعه کنید .  اساسا ، ما ارتفاع رو برای المنت  div.cd-svg-wrapper برابر 0  و padding-bottom رو برابر با 57.15% قرار میدیم . ( برای حفظ تناسب ابعاد svg ) ارتفاع و عرض المنت svg رو هم برابر با 100% میزاریم . 

.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%;
}

اضافه کردن عملگرها

برای متحرک سازی کردن اسلایدر ها و بخش clipping ، ما به صفت 'd' المنت <path> که در داخل المنت <clipPath> قرار داره انیمیشن میدیم . 

اول از همه ، ما مراحل مختلفی برای انجام یک انیمیشن مشخص میکنیم  . ما همون روندی که در ساخت انیمیشن hero slider رو پیگیری کردیم در اینجا هم از همون روند استفاده می کنیم . اما در این مورد ما به 6 مرحله نیاز داریم ( 3 مرحله برای انیمیشن دادن به اسلاید برای حرکت به جلو و 3 مرحله برای انیمیشن دادن به اسلاید برای حرکت به عقب ) 

هنگامی که مسیر مشخص شد ، ما صفت  data-stepn رو به المنت cd-slider اضافه میکنیم تا بدونیم در کدوم مرحله قرار داریم . دقیقا مثل صفت 'd' تعریف شده در هر مسیر ( تا به راحتی با استفاده از جاوا اسکریپت اون رو بازیابی کنیم )

ما از متد animate() که Snap.svg استفاده میکنیم برای انیمیشن دادن به المنت path .

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
	clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
		oldSlide.removeClass('visible');
		newSlide.addClass('visible').removeClass('is-animating');
	});
});

علاوه بر این ما چند روش برای تغییر اسلاید ها در این کتابخانه قرار دادیم مثل تغییر با لمس ، با دکمه های ( previous/next ) و کیبورد . 

مبنع : codyhouse