عنوان مقاله :

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

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 22 شهریور 1394
دسته بندی ها : کتابخانه

امروز در این مقاله من قصد دارم با یک روش جالب یک اسلایدر متحرک بسازم و به شما هم یاد بدم که چطور ساخته میشه . در این زمان ، ما با استفاده از تصاویر 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

مقالات پیشنهادی

منوی Accordion چند سطحی

امروز در این پست میخوایم طریقه ایجاد یک منویی آکاردئون ( Accordion ) چندسطحی رو بهتون یاد بدیم امیدوارم مورد استفاده اتون قرار بگیره . این منو تنها با...

افکت های اسکرول برای صفحات وبسایت

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

ساخت یک تور جالب برای محصولات

امروز قصد داریم یک تور رسپانسیو برای محصولات بسازیم . این تور یک راهنمای گام به گامه که قصد کمک به کاربران شما برای درک چگونگی استفاده از وب سایت شما...

ساخت یک منوی کشویی زیبا به اسم mega

یکی از سخت ترین قسمت زمانی که شما روی یک پروژه کار میکنین اینکه با تعداد زیادی محتوا رو به رو هستین و شما باید یه راه ساده برای ارائه این محتوا به کار...

دیدگاه های ارزشمند شما

مهران خرمی | 2 سال پیش

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

admin | 2 سال پیش

ممنون از شما لطف دارید
انشالله شما هم موفق و پیروز باشید .