دسته بندی :
تاریخ انتشار : ۲۲ شهریور ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

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

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • مهران خرمی

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

    • admin

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

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :