3DAnimatedMockup

ایجاد ماک آپ سه بعدی متحرک

مشاهده دموی این آموزش

امروزه با استفاده از افکت های سه بعدی سی اس اس ها که توسط بیشتر مرورگر های امروزی پشتیبانی میشوند، میتوانیم با با بهره گیری از انیمیشن های قدرتمند css وبسایت خودمون رو بسیار غنی تر کنیم و مطمئن باشیم که کاربران وبسایتمان از تعامل با سایت لذت میبرند! در مثال امروز به نحوه تبدیل صفحه فلت یک اپلیکیشن به یک ماک آپ سه بعدی و متحرک سازی اون خواهیم پرداخت.

این ایده توسط وبسایت Prismic.io ارائه شده است!

ایجاد ساختار اولیه

ساختار HTML این ماک آپ در دو تگ اصلی <div> قرار دارد. (.cd-product-intro و .cd-product-mockup)

اولی شامل مقدمه (یعنی عنوان ها، اکشن دکمه ها و …) و دومی شامل ماک آپ (و نقاط مشخص شده) هستند که داخل section.cd-product گنجانده شده اند.

<section class="cd-product">
	<div class="cd-product-intro">
		<h1><!-- Product name --></h1>
		<p><!-- Product description --></p>
		<div class="cd-triggers">
			<a href="#0" class="cd-btn">Download</a>
			<a href="#cd-product-tour" id="cd-start" class="cd-btn">Start</a>
		</div>
	</div> <!-- cd-product-intro -->
 
	<div id="cd-product-tour" class="cd-product-mockup">
		<img src="img/cd-app-image.png" alt="Preview image"> <!-- mockup image -->
		<ul class="cd-points-container">
			
			<li class="cd-single-point">
				<a class="cd-img-replace" href="#0">More info</a>
				<div class="cd-more-info cd-left">
					<h2><!-- Point of interest title --></h2>
					<p><!-- Point of interest description --></p>
					<a href="#0" class="cd-close-info cd-img-replace">Close</a>
				</div>
			</li> <!-- .cd-single-point -->
 
			<!-- other points of interest here -->
 
		</ul> <!-- .cd-points-container -->
 
		<div class="cd-3d-right-side"></div> 
		<div class="cd-3d-bottom-side"></div>
 
	</div> <!-- .cd-product-mockup -->
</section> <!-- .cd-product -->

دو تگ اضافی <div> یعنی cd-3d-right-side و cd-3d-bottom-side برای ایجاد بخش های سه بعدی نوشته شده اند در حالی که کلاس cd-product-mockup::before برای ایجاد سایه استفاده شده است.

استایل دهی

استایل دهی و سی اس اس بر روی دستگاه های کوچک بسیار سادست، با نگاه به کد ها و همچنین کامنت ها میتوان جزئیات بیشتری از آن ها متوجه شد!

بر روی دستگاه های دسکتاپی (با صفحه نمایش بزرگتر از ۱۱۷۰ پیکسل) به ترتیب، position خاصیت absolute و width 50% و left:0 به کلاس cd-product-intro باعث قرار گرفتن آن در سمت چپ صفحه نمایش شدیم.

.cd-product-intro::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1170px) {
  .cd-product-intro {
    position: absolute;
    left: 0;
    width: 50%;
    padding: 0;
    text-align: left;
    transition: transform 0.6s, opacity 0.6s;
  }
  .cd-product-intro::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

 

برای کلاس cd-product-mockup ابتدا width را با ۴۵۰ پیکسل و margin رو با auto 0 مقدار دهی کردیم تا در بخش container کلاس cd-product قرار بگیرد، سپس آن را با استفاده از CSS 3D transformations چرخاندیم.

.cd-product-mockup {
  width: 90%;
  /* set here the max-width for the mockup */
  max-width: 450px;
  margin: 0 auto;
}
@media only screen and (min-width: 1170px) {
  .cd-product-mockup {
    transform-style: preserve-3d;
    transform-origin: center top;
    transform: rotateX(-60deg) rotateZ(-40deg) translateX(50px) translateY(300px);
    transition: transform 0.6s;
  }
}

از دستور transform-style: preserve-3d برای حاصل کردن اطمینان از قرار گرفتن cd-3d-right-side و cd-3d-bottom-side در مکان های سه بعدی استفاده میکنیم.

به ترتیب برای ایجاد حالت سه بعدی، ماک آپ رو با دستور backgorund-image رو برای cd-3d-right-side و هم برای cd-3d-bottom-side ست میکنیم، همچنین سی اس اس اضافی چرخش رو برای هردو در نظر میگیریم. (rotateX یا rotateY بر اساس جهت)

@media only screen and (min-width: 1170px) {
  .cd-3d-right-side, .cd-3d-bottom-side {
    display: block;
    position: absolute;
    left: 0;
    background-image: url(../img/cd-app-image.png);
    /* Firefox bug - 3D CSS transform, jagged edges */
    outline: 1px solid transparent;
  }
  .cd-3d-right-side {
    top: -1px;
    width: 10px;
    height: 100%;
    background-size: auto 100%;
    transform-origin: left center;
    transform: translateZ(-1px) translateY(1px) rotateY(-90deg);
  }
  .cd-3d-bottom-side {
    bottom: 0;
    width: 100%;
    height: 10px;
    background-position: bottom center;
    background-size: 100% auto;
    transform-origin: center bottom;
    transform: translateZ(-1px) rotateX(-90deg);
  }
}

برای ایجاد سایه ماک آپ از cd-product-mockup::before pseudo-element استفاده میکنیم. میتونیم برای شروع از blur() filter استفاده کنیم، این یکی از ویژگی های css است که در فایرفاکس ۳۳ و ورژن های پایین تر و همچنین اینترنت اکسپلورر ۱۱ و پایینتر پشتیبانی نمیشود! برای حل این مشکل در فایرفاکس میتوان از SVG filter استفاده کرد اما تصحیح این مشکل برای اینترنت اکسپلورر کار چندان آسانی نیست! پس ویژگی blur() را رها میکنیم و با یک ترفند این کار را انجام میدهیم: width: 0 ، همچنین میتوانیم با استفاده از blur radius و spread radius برای رسیدن به نتیجه بهتر و واقعی تر استفاده کنیم!

@media only screen and (min-width: 1170px) {
  .cd-product-mockup::before {
    /* mockup shadow */
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* play with these values to create a realistic shadow */
    height: 45%;
    box-shadow: 0px 0px 30px 225px rgba(0, 0, 0, 0.1);
    transform: translateZ(-100px) translateY(480px);
    
    transition: transform 0.6s;
  }
}

نکته: از آنجا که IE11 و پایینتر از خاصیت transform-style: preserve-3d پشتیبانی نمیکند، شما قادر به مشاهده وجه سه بعدی ماک آپ نخواهید بود!

هنگامی که کاربر بر روی دکمه کلیک میکند کلاس is-product-tour را به المنت cd-product اضافه میکنیم، همچنین translateX(-50%) به cd-product-intro و translateX(0) به cd-product-tour نسبت میدهیم!

تبریک، کار به اتمام رسید، شما میتوانید فایل پروژه نهایی را در بخش دانلود باکس دانلود کنید!!!

در صورت استقبال بیشتر از مبحث طراحی وب و موضاعات مرتبط مقاله ترجمه و منتشر خواهیم کرد…

حتما نظراتتون رو در رابطه با این پست در بخش نظرات اعلام کنید!

با تشکر، عرفان صحاف نژاد

 

دیدگاه ها: 0
۱۳۹۴/۰۷/۰۸