عنوان مقاله :

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

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

امروز قصد داریم یک تور رسپانسیو برای محصولات بسازیم . این تور یک راهنمای گام به گامه که قصد کمک به کاربران شما برای درک چگونگی استفاده از وب سایت شما داره . یکی از ضرورت های که همیشه احساس میشه اینکه کاربر بتونه به راحتی با سایت یا برنامه شما آشنا بشه . یک مورد استفاده این کار میتونه در "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 اضافه میشه . 

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

 

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

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت دوم

امروزه jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطرا...

ساخت یک فرم تماس زیبا و کاربردی

امروز میخوایم یک فرم تماس زیبا ، ساده و کاملا قابل شخصی سازی رو با هم بسازیم . یک قطعه فرم مینیمال و قابل تنظیم سازی که باعث میشه شما دارای یک فرم معن...

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

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

محبوب ترین پلاگین ها و کتابخانه های جی کوئری در بهار 2015 [قسمت اول]

توسعه وب کار سختیه و چیزهای زیادی برای یادگیری وجود داره . برنامه نویس ها و طراحاها نیاز دارن هم روند با بسیاری از فن آوری های در حال ظهور به جلو حرکت...

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

سوران | 2 سال پیش

دوست عزیز خیلی عالیه دم شما گرم

مهدی | 2 سال پیش

جالبه