ساخت قالب با افکت زیبای بکگراند ثابت

امروز ما قصد داریم به شما طریقه ساخت و استفاده از قالب ساده اما فوق العاده جالب که با استفاده از خصوصیت css به اسم  background-attachment ساخته شده رو بهتون یاد بدیم . اما قبلش باید بگیم که گاهی اوقات شما برای خلق چیز های زیبا و تاثیر گذار به نوشتن کدهای  زیاد javascript نیاز ندارین برای همین هم ما امروز با استفاده از یک خوصیت به اسم background-attachment یک طرح زیبا و جالب خلق میکنیم . شما میتونید مجموعه ای از پس زمینه ها رو در یک نمایش بطور ثابت استفاده کنید با قرار دادن (background-attachment: fixed;). اما اگه بخوام یک مثال معروف از استفاده این طرح بزنم باید دیجی کالا رو بگم که جدیدا برای معرفی آپ آندروید  فروشگاهیش در یک صفحه هدف (landing page) از این ویژگی اسفتاده کرده که زیبایی خاصی هم در طرحش ایجاد کرده . 

این ترفند جدید که در اینجا مورد استفاده قرار گرفته (که ما از یک گوشی گوشی آیفون استفاده میکنیم) در موقعیت دقیق در تمام پس زمینه ها قرار داره و شما وقتی صفحه اتونو اسکرول میکنید یک افکت زیبا با یک گوشی میبینید اما در حقیقت اینطور نیست ، تنها کاری که شما نیاز دارید انجام بدید استفاده از تصاویر مختلف با همون اندازه و در همون موقیعت مشابه هست . 

• ساختار کد Html

 ساختار کلی html بطور اساسی : هر بخش تشکیل شده از عنصری با کلاس  .content که شامل یک عنوان و یک پارگراف میشه . کلاس های .img-1 و .img-2 برای اضافه کردن تصاویر مختلف در css استفاده میشن و همچنین عنصر با کلاس .cd-vertical-nav برای فلش ناوبری استفاده میشه . (در طرح ما غیرفعاله اما در نمونه دیجی کالا میتونید ببنید) .همچنین از data-type عناصر برای حرکت بخش ها بوسیله jquery استفاده میشه . 

<section class="cd-fixed-background img-1" data-type="slider-item">
	<div class="cd-content">
		<h2>Title here</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
	</div>
</section>
 
<section class="cd-fixed-background img-2" data-type="slider-item">
	<!-- ... -->
</section>
 
<nav>
	<ul class="cd-vertical-nav">
		<li><a href="#0" class="cd-prev inactive">Next</a></li>
		<li><a href="#0" class="cd-next">Prev</a></li>
	</ul> <!-- cd-vertical-nav -->
</nav>

•  ساختار استایل css 

این نکته مهم رو به یاد داشته باشید زمانی که ما برای گوشی ها خصوصیت background-attachment رو برابر fixed قرار میدیم . همه گوشی ها در پس زمینه نمایش داده نمیشن و همچنین ما برای نمایش گوشی ها یک عنصر خاص اختصاص ندادیم که بعد براش با خصوصیت background-images تصویر بزاریم بلکه ما با دستکاری کردن شبه کلاس after در عنصری با کلاس .cd-content تصاویر رو نمایش میدیم بصورت زیر : 

.cd-fixed-background .cd-content::after {
	/* phone image on small devices */
	content: '';
	display: block;
	width: 100%;
	padding: 60% 0;
	margin: 2em auto 0;
}

در مرحله دوم ، از اونجای که ما از background-images استفاده میکنیم ، ما 100% کنترل رو برای اینکه عنصر مورد نظرمون که (گوشی آیفون) کجا پیدار میشن نداریم برای همین این یک مشکل حل نشدنی برای اون دسته از کسایی که برای قرار دادن پیسکلی کارشون وسواس دارن ما هم راه حلی برای این موضوع پیدا نکردیم و باید باهاش بسازین . 

در اینجا کد های که برای ایجاد یه افکت ثابت نیاز دارید رو میتونید ببینید :

html, body {
 	height: 100%;
}
 
.cd-fixed-background {
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
 
.cd-fixed-background.img-1 {
	background-image: url("../img/img-1.jpg");
}
 
.cd-fixed-background.img-2 {
	background-image: url("../img/img-2.jpg");
}
 
.cd-fixed-background.img-3 {
	background-image: url("../img/img-3.jpg");
}

• ساختار عمکلردها 

ما با استفاده از جی کوئری یک فلش ناوبری برای حرکت بین اسلاید ها یا همون بخش ها ایجاد میکنیم . در اسکرول صفحه ، ما دید فلش رو با استفاده از تابع checkNavigation بروزرسانی میکنیم و برای تشخیص بخشی که در حال مشاهدش هستیم از کلاس .is-visible استفاده میکنیم که با استفاده از تابع  checkVisibleSection به بخش مورد نظر اضافه میشه در ضمن برای فلش ناوبری برای جلو بردن یک بخش از تابع nextSection و برای برگردوندن یک بخش از تابع prevSection استفاده میکنیم . 

خب امیدوارم براتون جالب بوده باشه و همچینین مورد استفاده اتون قرار گرفته باشه .