مدل پنجره ای SVG

امروز قصد دارم ساخت یک پنجره ساده بهمراه یک پس زمینه Svg متحرک رو بهتون یاد بدم . ما به تازگی تجربه ای در ساخت انیمیشن های svg با ارائه این پست داشتیم "اسلایدر تصاویر svg متحرک" که در اونجا ما با استفاده از svg و انتقالش بصورت انیمیشن تونستیم یک اسلایدر بسازیم . امروز میخوایم آموزش بدیم که چطور با استفاده از یک انیمیشن شما میتونید به چند svg افکت بدین و یک مدل پنجره ای متحرک بسازید . 

دریافت فایل | نمایش آنلاین

ایجاد ساختار HTML

ساختار html این طرح از دو بخش تشکیل میشه . یک <section> برای اضافه کردن دکمه فعال کردن مدل پنجره ای (#modal-trigger) و بخش دوم div.cd-modal که برای قرار دادن مدل پنجره ای اصلی استفاده میشه . البته محتوای مدل هم در داخل (.cd-modal-content) قرار میگیره و div.cd-svg-bg برای ایجاد افکت مورد نظرمون استفاده میشه . 

<main class="cd-main-content">
	<section class="center">
		<h1>SVG Modal Window</h1>
		<a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Fire Modal Window</a>
	</section>
</main> <!-- .cd-main-content -->
 
<div class="cd-modal" data-modal="modal-trigger">
	<div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z">
		<svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500">
			<title>SVG Modal background</title>
			<path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/>
			<path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/>
			<path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/>
		</svg>
	</div>
 
	<div class="cd-modal-content">
		<!-- modal content here -->
	</div> <!-- cd-modal-content -->
 
	<a href="#0" class="modal-close">Close</a>
</div> <!-- cd-modal -->
 
<div class="cd-cover-layer"></div> <!-- .cd-cover-layer -->

به علاوه از div.cd-cover-layer استفاده میشه برای پوشش دادن محتوای صفحه اصلی وقتی که مدل پنجره ای فعال میشه . (این المنت در بین مدل پنجره ای و محتوای اصلی قرار میگیره ).

اضافه کردن استایل 

به کلاس cd-modal در ابتدا استایل visibility برابر hidden و height رو برابر با 100% ، width رو برابر با 100% و position این المنت رو برابر با fixed قرار میدیم . 

وقتی کاربر روی المنت a#modal-trigger کلیک کنه visibility مدل پنجره ای به visible تغییر میکنه . (البته با استفاده از کلاس modal-is-visible)  . 

.cd-modal {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}
.cd-modal.modal-is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

برای ایجاد کردن افکت بکگراند مدل پنجره ای ما با استفاده از صفت 'd' المنت <path> به این Svg انیمیشن میدیم . در ضمن این المنت در داخل div.cd-svg-bg > svg قرار داره (توضیحات بیشتر در بخش عملگرها )

روش اول ما برای ایجاد افکت "masked" استفاده از SVG foreignObject بود که شامل محتوای معینی از SVG میشد . به این ترتیب ما میتونیم با استفاده از المنت path و مرجع قرار دادن متن های داخل ، پس زمینه رو به راحتی متحرک کنیم . با این حال ما با چند مسئله مختلف برای سازگاری با مرورگرهای مختلف سروکار داریم . 

به همین دلیل ما تصمیم گرفتیم که از ترفند های ساده تری استفاده کنیم : وقتی که پنجره مدل فراخونی میشه . یک لایه به اسم (cd-cover-layer) اول قابل مشاهده میشه درست در زیر پس زمینه مشخص شده . و بعد از اون متن قابل مشاهده میشه . به این صورت دیگه با المنت اصلی و محتوای اصلی کاری نداریم . در المنت cd-cover-layer رنگ پس زمینه و رنگ متن همون رنگ صفحه اصلیه فقط بخاطر اینکه در حالت انیمیشن در صفحه اصلی ایجاد مشکل نکنه . 

جزئیات بیشتر : وقتی کاربر روی a#modal-trigger کلیک میکنه ، کلاس modal-is-visible به المنت cd-cover-layer و cd-modal اضافه میشه .در کلاس cd-cover-layer تغییراتی رخ میده و opacity از 0 به 1 و visibility از hidden به visible تغییر پیدا میکنه . پس cd-cover-layer زمانی که فعال میشه کل محتوای صفحه اصلی رو پوشش میده . 

.cd-cover-layer {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
}
.cd-cover-layer.modal-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

 پس از اینکه انتقال لایه cd-cover-layer با موفقیت به پایان برسه ، opacity المنت cd-modal-content هم برابر با 1 قرار میگیره . 

.cd-modal-content {
  color: #f2f2f2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s 0s, transform 0.3s 0s;
}
.modal-is-visible .cd-modal-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

از اونجای که رنگ المنت cd-modal-content همون رنگ پس زمینه cd-cover-layer هست . محتوا تنها در حالتی قابل مشاهده خواهند بود که روی رنگ پس زمینه آبی SVG قرار بگیره.

دستکاری عملگرها 

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

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

هنگامی که مسیر مشخص شد . ما به  cd-svg-bg یک صفت data-stepn اضافه میکنیم ( برای مشخص کردن هر مرحله ) که برابر با صفت 'd' داخل path است ( به راحتی با جاوا اسکریپت میتونیم برگردونیم ) 

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

modalTrigger.on('click', function(event){ //modalTrigger =  $('a[data-type="cd-modal-trigger"]')
	event.preventDefault();
	$([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer')
	animateModal(pathsArray, pathSteps, duration, 'open');
});
 
function animateModal(paths, pathSteps, duration, animationType) {
	var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1));
		path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2],
		path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4];
	paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1')
	paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2')
	paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3')
}

منبع : codyhouse