عنوان مقاله :

مدل پنجره ای SVG

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

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

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

ساخت یک قالب با الگویی 2 بلوکه

امروز قصد داریم یک قالب ساده با الهام عالی از Dropbox Guide website رو بسازیم . که در دستگاهای با صفحه نمایش بزرگ محتوا به دو ظرف اصلی تقسیم میشود و و...

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

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

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

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

ساخت پنل تاشو 3 بعدی با استفاده از css3 و jquery

سلام با یکی دیگه از مقاله های سایت راکت در خدمتتونیم ، امروز قصد داریم یک پنل ثانویه کاملا flat که با استفاده از css و jquery برای شما دوستان و کاربرا...

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

هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است