عنوان مقاله :

مدل پنجره ای SVG

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

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

امروز قصد دارم ساخت یک پنجره ساده بهمراه یک پس زمینه 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

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

ثبت دیدگاه شما

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