یک تکنیک ساده پارالاکس | آموزش وردپرس|آموزش طراحی سایت|آموزش ووکامرس » یک تکنیک ساده پارالاکس

یک تکنیک ساده پارالاکس

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

گام اول: آماده‌سازی

این تکنیک، بر اساس کنترل سرعت تصویر پس‌زمینه است. با نمونه HTML شروع می‌کنیم و دو بخش در آن با دو مشخصه “data-type” و “data-speed” ایجاد می کنیم. جای نگرانی نیست؛ چون این موارد را در ادامه توضیح خواهیم داد.

<section id="home" data-type="background" data-speed="10">                           

</section>  

 

<section id="about" data-type="background" data-speed="10">

</section>

 

 

در این کد، از تگ <section> با مشخصه‌های “data-type” و “data-speed” استفاده شده که از موارد معرفی شده در HTML5 است. این کار باعث می‌شود تا نمونه HTML منظم‌تر و خواناتر شود.

بر اساس موارد ارائه شده در مشخصه‌های سفارشی داده‌ها (Custom Data Attributes)، هر مشخصه‌ای که با data- آغاز شود، به عنوان یک ناحیه ذخیره اطلاعات شخصی درنظر گرفته خواهد شد.

چیزی که ما احتیاج داریم کنترل سرعت تصاویر پس‌زمینه است؛ بنابراین از data-speed=”10″ و data-type=”background” به عنوان مشخصه‌های اصلی برای تعیین پارامتر‌های لازم، استفاده خواهیم کرد.

نگران اینترنت اکسپلورر هم نباشید، برای آن نیز در ادامه راه‌حل خواهیم داشت.

اکنون، می‌خواهیم در بین تگ <article> در هر بخش، یک محتوا اضافه کنیم.

<section id="home" data-type="background" data-speed="10" class="pages">    

         <article>I am absolute positioned</article>

    </section>  

 

<section id="about" data-type="background" data-speed="10" class="pages">

         <article>Simple Parallax Scroll</article>

</section>

 

 

کاری که ما می‌خواهیم در اینجا انجام دهیم این است که تصویر پس‌زمینه در <section> دارای سرعت کمتری نسبت به محتوای آن در هنگام حرکت کاربر در صفحه باشد. این کار به ما کمک می‌کند تا به نوعی یک شکست نور ایجاد کنیم. قبل از استفاده از ترفند jQuery، بیایید تصاویر پس‌زمینه را به هر بخش از CSS اضافه کنیم.

#home {

background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

}

 

#about {

background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; 

}

 

 

تصاویر مورد استفاده برای پس‌زمینه هر دو بخش، به صورت زیر هستند:

only_background_1

only_background_2

اکنون، می‌خواهیم به CSS خودمان اندکی استایل اضافه کنیم تا سر و شکلی به خود بگیرد.

#home {

  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

  height: 1000px;

  margin: 0 auto;

  width: 100%;

  max-width: 1920px;

  position: relative;

}

 

#home article {

  height: 458px;

  position: absolute;

  text-align: center;

  top: 150px;

  width: 100%;

}

 

#about {

  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;

  height: 1000px;

  margin: 0 auto;

  width: 100%;

  max-width: 1920px;

  position: relative;

  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);

  box-shadow: 0 0 50px rgba(0,0,0,0.8);

}

 

#about article {

  height: 458px;

  position: absolute;

  text-align: center;

  top: 150px;

  width: 100%;

}

 

 

اکنون، نتیجه به صورت زیر خواهد بود:

1

گام دوم: کد جادویی

جادویی که با استفاده از jQuery انجام می‌شود و با استفاده از روش استاندارد document.ready() شروع می‌شود. در نتیجه، از بارگذاری صفحه و آماده‌ شدنش برای تنظیمات، مطمئن خواهیم شد.

$(document).ready(function(){

 

 

});

 

 

به خاطر داشته باشید که:

این تکنیک بر اساس کنترل سرعت تصویر پس‌زمینه‌هایی که در هر دو بخش قرار دارند، عمل می‌کند.

از اینجا به بعد، نیاز به تمرکز بیشتری خواهیم داشت. اولین اتفاقی که در ادامه می‌افتد، این است که برای هر <section> در صفحه با مشخصه data-type=”background” ، عمل زیر را تکرار می‌کنیم:

$(document).ready(function(){

 

$('section[data-type="background"]').each(function(){

var $bgobj = $(this); // assigning the object

});

 

});

 

 

یک تابع دیگر با نام .scroll() درون تابع .each() اضافه می کنیم که کاربر را برای حرکت در صفحه ترغیب می‌کند.

$(window).scroll(function() {

 

});

 

 

اکنون باید میزان حرکت در صفحه را توسط کاربر تعیین کنیم و سپس نسبت آن را به مقدار data-speed که قبلاً معیّن کرده‌ایم، بدست آوریم:

 	var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop()

 

با این عبارت، ما میزان کنونی حرکت کاربر در صفحه از بالا را بدست می‌آوریم. این مقدار، در واقع، نشان می‌دهد که کاربر چقدر به سمت پایین صفحه حرکت کرده است.

$bgobj.data('speed')

 

به میزان سرعت تصویر پس‌زمینه در نمونه HTML اشاره دارد (data-speed).

yPos

مقدار نهایی است که برای تکنیک حرکت در صفحه نیاز خواهیم داشت. در هر حال، این مقدار برای ما منفی خواهد بود؛ چون می‌خواهیم که پس‌زمینه در جهت خلاف حرکت کاربر در صفحه حرکت کند.

در اینجا با یک مثال، این موضوع را بیشتر بررسی می‌کنیم.

2

در مرورگر، ۵۷ پیکسل به سمت پایین حرکت شده است. در این میان، محتوا با همین سرعت به سمت پایین آمده، ولی تصویر پس‌زمینه ۵/۷ پیکسل جابجا شده است. حرکت در مرورگر تقسیم بر data-speed برابر است با مقدار نهایی. در تصویر بالا، سرعت تصویر پس‌زمینه برابر ۱۰ تنظیم شده است.

// Put together our final background position

var coords = '50% '+ yPos + 'px';

 

// Move the background

$bgobj.css({ backgroundPosition: coords });

 

 

آخرین کاری که باید انجام دهیم این است که موقعیت نهایی تصویر پس‌زمینه را به صورت یک متغیر درآوریم. برای آن‌ که وضعیت افقی پس‌زمینه را ثابت نگه داریم، عدد ۵۰ را به موقعیت راستای x آن، اختصاص داده‌ایم. سپس متغیر yPps را به عنوان موقعیت راستای y قرار داده‌ایم و در نهایت نیز، مختصات پس‌زمینه را به تصویر پس‌زمینه <section> اضافه کرده‌ایم:

$bgobj.css({ backgroundPosition: coords });

 

کد نهایی، به شکل زیر خواهد بود:

$(document).ready(function(){

$('section[data-type="background"]').each(function(){

var $bgobj = $(this); // assigning the object

 

$(window).scroll(function() {

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

 

// Put together our final background position

var coords = '50% '+ yPos + 'px';

 

// Move the background

$bgobj.css({ backgroundPosition: coords });

});

});

});

 

 

طراحی کامل شده است؛ می‌توانید دوباره به تمرین آن بپردازید.

رفع مشکل IE

یک تنظیم دیگر باقی مانده و آن رفع مشکل اینترنت اکسپلوررهای قدیمی با تگ‌های <section> و <article> است. رفع این مشکل، بسیار ساده است. راه حل آن استفاده از ابزار استاندارد در ساخت المان‌های صفحه است؛ چیزی که باعث می‌شود که اینترنت اکسپلورر به صورتی باورنکردنی تگ‌های HTML5 را تشخیص دهد.

// Create HTML5 elements for IE

 

document.createElement("article");

document.createElement("section");

 

 

 

به علاوه، می‌بایست یک فایل راه‌اندازی مجدد CSS نیاز داریم تا این تکنیک در تمام مرورگرها به خوبی کار کند. خوشبختانه، ابزارهایی مانند HTML5 Boilerplate نیز هستند که کارها را در این زمینه بسیار ساده می‌کنند.



نمایش نظرات “یک تکنیک ساده پارالاکس”

  1. afshin گفت:

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

Add Comment Register



پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود اعضای سایت

ماهنامه باشگاه وردپرس

دانلود رایگان

ما را دنبال کنید

نمادها

اینستاگرام



لطفا نام و ایمیل خود را وارد کنید
تا این آموزش ارزشمند همین الان برایتان ایمیل شود

فیلم آموزشی را همین الان برایم ایمیل کن

برای دانلود فیلم وبینار لطفا اطلاعات خود را وارد کنید
لینک دانلود بلافاصله برایتان ایمیل خواهد شد

ثبت اطلاعات و دانلود فیلم

برای ثبت نام لطفا اطلاعات خود را وارد کنید

ثبت نام

برای ثبت نام لطفا اطلاعات خود را وارد کنید

ثبت نام
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
چند ثانیه تا دانلود فاصله دارید!
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود این فیلم آموزشی با کیفیت اصلی
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم
دانلود اولین ماهنامه تخصصی وردپرس
کافی است آدرس ایمیلتان را وارد کنید
ما هم مثل شما از ایمیل های مزاحم متنفریم