ساخت یک تور جالب برای محصولات

امروز قصد داریم یک تور رسپانسیو برای محصولات بسازیم . این تور یک راهنمای گام به گامه که قصد کمک به کاربران شما برای درک چگونگی استفاده از وب سایت شما داره . یکی از ضرورت های که همیشه احساس میشه اینکه کاربر بتونه به راحتی با سایت یا برنامه شما آشنا بشه . یک مورد استفاده این کار میتونه در "free trial" یا دمو های محصولاتتون باشه . که اگه کاربری قصد خرید برنامه اتون رو داره . در قدم اول نیاز داره تا اطلاعات در مورد محصول و طریقه کارش بدست بیاره . خوب شما میتونید با این تور به راحتی تمام اطلاعاتی که میخواین رو ظرف چند دقیقه به کاربر بدین . تا اون راحت تر تصمیم بگیره که مایل به خرید هست یا نه . هیچکس دلش نمیخواد به یکباره همه اطلاعات با حجم زیاد رو بگیره "و بعد اه لعنتی من با این همه باید چیکار کنم "؟ ساده ترین راه برای حل این مشکل و بهبود رابطه کاربری اینکه یک تور ساده برای توضیح گام به گام بسازیم .

دانلود فایل | دمو

امروز قصد ما اینکه یک تور دستی با css و jquery ایجاد کنیم . این تور برای تجربه کاربری بهتر بطور رسپانسیو ساخته میشه تا در هر دستگاه نمایش خوبی داشته باشه .

در زیر یک انیمیشن کوتاه از نمایش این تور در دستگاه های بزرگ و کوچیک رو میتونید ببینید .

ساختار کد html

ساختار کد ما از یک لیست تشکیل میشه : هر آیتم از این لیست هم شامل کلاس .cd-more-info (که خود این تگ هم شامل عنوان مرحله ، شرح مختصر و همینطور تصویر برای موبایل ها میشه ) و از تگ <span> برای ساخت نقطه شاخص استفاده میشه . که کدش رو میتونید در زیر ببینید .

<body>
	<button id="cd-tour-trigger">Start tour</button>
 
	<ul class="cd-tour-wrapper">
		<li class="cd-single-step">
			<span>Step 1</span>
 
			<div class="cd-more-info bottom">
				<h2>Step Number 1</h2>
				<p><!--  description here  --></p>
				<img src="img/step-1.png" alt="step 1">
			</div>
		</li> <!-- .cd-single-step -->
 
		<!-- other steps here -->
	</ul> <!-- .cd-tour-wrapper -->
 
</body>

توجه داشته باشید که المنت با کلاس .cd-nav برای ساخت یک نوار پیمایش استفاده میشه که کاربر به راحتی با کلیک میتونه به مرحله بعد یا قبل بره . اگه براتون سوال شده که این المنت چرا تو کد بالا نیست باید بهتون بگم که با html ساخته نمیشه بلکه با jquery ایجاد میشه . همچنین المنت با کلاس .cd-app-screen هم برای ساخت یک بکگراند جعلی برای برنامه است که شما اگه بخواین میتونید به راحتی از کد هاتون حذف کنید و اصلا نگران هیچی نباشید .

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

در تلفن های همراه ، این تور بصورت یک پنجره مدل ظاهر میشه ( این مدل اول با افکت scale توسط css3 ظاهر میشه و بعد با استفاده از CSS3 transition برای رفتن به مرحله قبل یا بعد افکت دهی میشه ) ، هر مرحله از یک عنوان و توضیحات مختصر و همینطور یک عکس رسپانیسو در اول نمایش به کاربر نشون میده . css استفاده شده در این ورژن بسیار سادست .

در دسکتاپ ها ( صفحه نمایش های بزرگتر از1100 px ) ما برای هر المنت با کلاس .cd-single-step یک موقعیت تعیین میکنیم (ما از درصد به جای px برای موقعیت المنت استفاده میکنیم تا بدونه در نظر گرفتن صفحه نمایش ، به راحتی بتونیم در هر ابزاری در یک موقعیت مناسب نمایش بدیم) از <span> هم در هر المنت .cd-single-step بطور جداگانه برای ایجاد نقطه شاخص استفاده میکنیم . که در این نقطه با استفاده از شبه کلاس ::after و انیمیشن های css یک افکت زیبا ایجاد میکنیم .

@media only screen and (min-width: 1100px) {
  .cd-single-step {
    position: absolute;
    border-radius: 50%;
    visibility: hidden;
    transition: visibility 0s 0.4s;
  }
  .cd-single-step:nth-of-type(1) {
    /* set tour points positions */
    bottom: 40%;
    right: 30%;
  }
 
  /*define here all the other list items position values*/
 
  .cd-single-step > span {
    /* dot indicator - visible on desktop version only */
    width: 10px;
    height: 10px;
    background: #ff962c;
    transform: scale(0);
    transition: transform 0.4s;
    /* replace text with background images */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  .cd-single-step .cd-more-info {
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .cd-single-step.is-selected {
    /* visible step */
    visibility: visible;
    transition: visibility 0s 0s;
  }
  .cd-single-step.is-selected > span {
    transform: scale(1);
  }
  .cd-single-step.is-selected::after {
    animation: cd-pulse 2s infinite;
    animation-delay: 0.5s;
  }
  .cd-single-step.is-selected .cd-more-info {
    opacity: 1;
  }
}
 
@keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 #ff962c;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
  }
}

چهار کلاس متفاوت برای تعیین موقعیت ابزار نسبت به نقطه شاخص استفاده میشه که اون چهار کلاس عبارت اند از : (top ، bottom ، left و right در المنت با کلاس .cd-more-info استفاده میشه)

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

ما با استفاده از jquery قابلیت ناوبری تور رو میسازیم . (و قابلیت های کار با کیبورد ، کشیدن لمسی و کلیک رو نوار previous/next رو بهش اضافه میکنیم ) . از تابع createNavigation() برای اضافه کردن قابلیت ناوبری به تور استفاده میکنیم (.cd-nav) و با استفاده از DOM به کد html اضافه میشه .

امیدوارم لذت برده باشین .