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

سلام با یکی دیگه از مقاله های سایت راکت در خدمتتونیم این مقاله از سایت codyhouse و ما فقط ترجمه ان را انجام دادیم تا شما دوستان نیز بتونین از اون استفاده کنید ، امروز قصد داریم یک پنل ثانویه کاملا flat که با استفاده از css و jquery برای شما دوستان و کاربران عزیز اماده شده بسازیم ، که امیدوارم مورد استفاده اتون قرار بگیره . در حال حاضر افکت های 3 بعدی بسیار محبوب هستند عمدتا به این خاطر که در برنامه های تلفن همراه اغلب مورد استفاده قرار میگیرن . یک مثال زیبا از این افکت ها میتونه app ای او اس Peek Calendar باشه . با تشکر از تحولاتی که در css3 اتفاق افتاده ما میتونیم افکت های مشابه رو تو مرورگرها هم بوجود بیاریم. 

گاهی اوقات استفاده بیش از حد افکت های سه بعدی باعش ایجاد یه رابطه کاربری بد میشه و همین یه نکته است که چرا نباید خودسر تو هرجا ازش استفاده کنیم . با این حال ، وجود داره مواردی که بشه از این افکت ها استفاده ای خوب و درستی کرد برای مثال زمانی که بخواین یه محتوایی رو برای کاربر نشون بدین که در حالت عادی نمایش داده نمیشه برای لود کردن اونا هم ، انیمیشن ها میتونین راه بهتری نسبت به لودینگ ها برای بارگذاری محتوا باشن . علاوه بر این با رشد برنامه ها ما میتونیم فریم ورک های بسازیم که تا به سادگی ، انیمیشن های پیچیده ای برای کار خودمون ایجاد کنیم . 

بوجود آوردن ساختار html 

ساختار html ما از 2 تگ اصلی تشکیل شده : یکی تگ لیست که شامل المت های با کلاس .cd-item در تگ اصلی میشه و دیگری عنصر با کلاس .cd-folding-panel که شامل پنل محتوا (با کلاس .cd-fold-content ) و دو چین خوردگی (.left-fold و .right-fold) میشه . کد مربوط به ساحتار رو میتونید در زیر بببینید : 

<main class="cd-main">
	<ul class="cd-gallery">
		<li class="cd-item">
			<a href="item-1.html">
				<div>
					<h2>Title 1</h2>
					<p>Lorem ipsum dolor sit amet, consectetur.</p>
					<b>View More</b>
				</div>
			</a>
		</li>
 
		<li class="cd-item">
			<!-- content here -->
		</li>
 
		<!-- additional list items here -->
	</ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->
 
<div class="cd-folding-panel">
	
	<div class="fold-left"></div> <!-- this is the left fold -->
	
	<div class="fold-right"></div> <!-- this is the right fold -->
	
	<div class="cd-fold-content">
		<!-- content will be loaded using javascript -->
	</div>
 
	<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->

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

برای ساخت انیمیشن ها ما از CSS3 Transformations برای عناصر .left-fold و .right-fold و همینطور برای .cd-main و  .cd-itemاستفاده میکنیم . برای متحرک سازی اون افکت چین خوردگی ما از شبه عنصر (::after)  برای کلاس های  .left-fold و .right-fold استفاده میکنیم . 

روی موبایل ها ، ما فقط از چین خوردگی سمت راست بطور پیش فرض برای نمایش استفاده میکنیم (display کلاس .left-fold برابر با none قرار میدیم ) . کلاس .cd-folding-panel (فرزند اون با کلاس .right-panel) دارای یه موقعیت ثابته که کل صفحع نمایش رو پوشش میده . ( خاصیت visibility رو برابر hidden میکنیم ) . در حالی که .right-panel::afte به سمت چپ انتقال پیدا میکنه و بعد میچرخه (translateX(-100%) rotateY(-90deg), با transform-origin: right center) . 

وقتی کاربر روی یکی از آتیم های با کلاس .cd-item کلیک میکنه .cd-main به سمت راست منتقل میشه (با استفاده از کلاس .fold-is-open) و وقتی که روی صفحه کلیک میکننه .right-fold::after به عقب بر میگرده . ( از .is-open که برای .cd-folding-panel اختصاص پیدا کرده استفاده میکنیم)

.cd-main {
  overflow-x: hidden;
}
.cd-main > * {
  transition: transform 0.5s 0.4s;
}
.cd-main.fold-is-open > * {
  /* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
  transform: translateX(100%);
  transition: transform 0.5s 0s;
}
 
.cd-folding-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  overflow: hidden;
  transition: visibility 0s 0.9s;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
  /* the :after elements of .fold-left and .fold-right are the 2 fold sides */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* enable a 3D-space for children elements */
  perspective: 2000px;
}
.cd-folding-panel .fold-right {
  perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
  /* on mobile only the right fold side is visible */
  display: none;
}
.cd-folding-panel .fold-right::after {
  /* 2 fold sides */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: right center;
  transform: translateX(-100%) rotateY(-90deg);
  transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
}
.cd-folding-panel.is-open {
  visibility: visible;
  transition: visibility 0s 0s;
}
.cd-folding-panel.is-open .fold-right::after {
  transform: translateX(0);
  transition: transform 0.5s 0s, background-color 0.5s 0s;
}

بر روی دستگاههای دستکتاپ ( صفحه نمایش بزرگتر از 1100px) هر دو شبه عنصر ::after دارای انیمیشن میشن . کلاس .cd-folding-panel حالا در وسط صفحه نمایش باز میشه (width: 800px) ، کلاس های .left-panel  و .right-panel دارای float: left میشن و هر دوتاشون عرضی برابر نصف عنصر پدرشون میگیرن یعنی (400px) .هر دو شبه عنصر ::after به اندازه 90 درجه میچرخن (rotateY(-90deg)) و بعد سمت چپ منتقل میشن (.left-panel::after – translateX(100%)) یا به سمت راست    (.right-panel::after – translateX(-100%)) . 

وقتی کاربر روی یکی از آیتم های با کلاس .cd-item کلیک میکنه همه آتیم ها به سمت چپ (:nth-of-type(2n+1)) یا راست (:nth-of-type(2n)) منتقل میشن . در حالی که هر دو عنصر دارای شبه عنصر ::after  برگشت میکنن . (rotateY(0) translateX(0)) .

@media only screen and (min-width: 1100px) {
  .cd-item {
    width: 50%;
    float: left;
    transition: transform 0.5s 0.4s;
  }
  .fold-is-open .cd-item {
    transition: transform 0.5s 0s;
    transform: translateX(-400px);
  }
  .fold-is-open .cd-item:nth-of-type(2n) {
    transform: translateX(400px);
  }
}
 
@media only screen and (min-width: 1100px) {
  .cd-folding-panel {
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
  }
  .cd-folding-panel .fold-left,
  .cd-folding-panel .fold-right {
    width: 50%;
    float: left;
    height: 100%;
  }
  .cd-folding-panel .fold-right {
    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 0% 50%;
  }
  .cd-folding-panel .fold-right::after {
    transform-origin: right center;
    transform: translateX(-100%) rotateY(-90deg);
  }
  .cd-folding-panel .fold-left {
    display: block;
    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 100% 50%;
  }
  .cd-folding-panel .fold-left::after {
    transform-origin: left center;
    transform: translateX(100%) rotateY(90deg);
  }
  .cd-folding-panel.is-open .fold-right::after,
  .cd-folding-panel.is-open .fold-left::after {
    transform: translateX(0);
    transition: transform 0.5s 0s, background-color 0.5s 0s;
  }
}

یک نکته مهم : هر یک از شبه عنصر ::after به طور پیش فرص دارای یه نقطه محو شونده است . برای اینکه شاید انیمیشن ها بدرستی کار نکنه ما perspective-origin هر دو عنصر رو تغییر میدیم .

.cd-folding-panel .fold-right {
  perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
  perspective-origin: 100% 50%;
}

دستکاری رویداد ها

در فایل index.html ، ابتدا در کلاس .cd-fold-content محتوایی وجود ندارد ، زمانی که کاربر یکی از المت های .cd-item رو انتخاب میکنه ما با استفاده از تابع load() محتوایی مورد نظرمونو تو .cd-fold-content وارد میکنیم . ( ما برای هر کدوم از .cd-item یه فایل جدا برای ذخیره متحوا توشون بوجود میاریم مثل : item-2.html ، item-1.html) بعد از این که محتوایی متنی در فایل ها ذخیره شد و کلاس ها بدرستی اختصاص داده شده باشه و انیمیشن ها هم درست کار کنه . دیگه تمومه و شما به سادگی متونید تو پروژه اتون ازش استفاده کنید .

/* open folding content */
$('.cd-gallery a').on('click', function(event){
	event.preventDefault();
	openItemInfo($(this).attr('href'));
});
function openItemInfo(url) {
	/* check if mobile or desktop */
	var mq = viewportSize();
	if( $('.cd-gallery').offset().top > $(window).scrollTop() && mq != 'mobile') {
		/* if content is visible above the .cd-gallery - scroll before opening the folding panel */
		$('body,html').animate({
			'scrollTop': $('.cd-gallery').offset().top
		}, 100, function(){ 
           	toggleContent(url, true);
        }); 
 
	} else {
		toggleContent(url, true);
	}
}
 
function toggleContent(url, bool) {
	if( bool ) {
		/* load and show new content */
		$('.cd-fold-content').load(url+' .cd-fold-content > *', function(event){
			$('body').addClass('overflow-hidden');
			$('.cd-folding-panel').addClass('is-open');
			$('.cd-main').addClass('fold-is-open');
		});
 
	} else {
		/* close the folding panel */
		$('.cd-folding-panel').removeClass('is-open')
		$('.cd-main').removeClass('fold-is-open');
		
		/* ...*/
	}
	
}

نکته : ما برای آپلود کردن محتوامون از تابع load() استفاده مکنیم . شما میتونید از هر تابع دیگه ای در جی کوئری مثل $.ajax() استفاده کنید و به سادگی ازش استفاده کنید 

خب یه مقاله دیگه هم به خوبی تموم شد امیدوارم مورد توجتون قرار گرفته و بتونین ازش تو پروژهاتون استفاده کنید . اگه نظر ، پیشنهاد ، انتقادی دارین خوشحال میشیم اونو با ما تو بخش نظرات در میون بزارید . با تشکر از وقتی که بهمون دادینو این مقاله رو خوندین .