دیگری که پس‌زمینه ما را نگه می‌دارد اضافه می‌کنیم:

<section>
<h1>Home page</h1>
<p>We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</p><p>We offer the following services:</p>
<ul>
<li>Branding</li>
<li>Logos</li>
<li>Websites</li>
<li>Web applications</li>
<li>Web development – HTML5, CSS, jQuery</li>
<li>Content Management Systems</li>
<li>Responsive Web Design</li>
<li>Illustration</li>
<li>Business cards</li>
<li>Letterheads and compliment slips</li>
<li>Flyers</li>
<li>Mailers</li>
<li>Appointment cards</li>
</ul>
<h1>Sub page</h1>
<p>Before you choose us to take روی your project you will probably want to know a bit more about us, so meet the team:</p>
<img alt="" src="https://lorempixum.com/500/600" /> <p>Ross has over 10 years experience in the industry. He is our Creative Director, digital designer, web designer and front-end developer. He is also pretty good with a sketchbook. Before starting the company Ross worked as a designer and studio manager for a design house who boasted a number of big name clients. Ross has brought his vast experience from this role to the work he does now.</p>
<p>Monica is Ross’ sister, our Art Director and specialises in graphic and print design. She has also worked with some big names and her designs have won her a number of industry awards.</p> <p>Rachel and Chandler are our Junior Designers. Rachel is a web designer with knowledge of HTML and CSS and supports Ross روی projects. Chandler has just finished his Graphic Design degree and enjoys continuing to learn from Monica and building his experience.</p> <img alt="" src="https://lorempixum.com/500/600/sports" /> <p>Joey and Phoebe focus روی bringing new business to the company. They have won a number of big clients recently and both also have qualifications in project management to ensure that the projects run smoothly from start to finish.</p>
</section>

این تمام HTML است که ما به آن نیاز داریم. تمام متن فقط برای اطمینان از اینکه ما کل را پوشش می دهیم است page به طوری که پیمایش ضروری است. بیایید بیشتر روی به CSS:

CSS

CSS مورد نیاز برای ایجاد یک افکت اختلاف منظر در واقع بسیار ساده است اگر بدانید چرا به این شکل نوشته شده است. ابتدا باید تصویر پس زمینه را تنظیم کنیم .bg div و سپس باید از پیمایش div جلوگیری کنیم زیرا عمل اسکرول توسط jQuery اعمال خواهد شد. بنابراین باید موقعیت آن را روی آن تنظیم کنیم درست شد. سپس عرض را روی 100٪ و ارتفاع را روی 300٪ تنظیم می کنیم تا مطمئن شویم که div بزرگتر از صفحه واقعی است. آن را در سمت چپ بالا قرار می دهیم و در نهایت یک z-index -1 به آن می دهیم تا مطمئن شویم که زیر متن ارائه شده است.

.bg {
 background: url('bg.jpg') repeat;
 position: fixed;
 width: 100%;
 height: 300%;
 top:0;
 left:0;
 z-index: -1;
}

این تمام CSS هایی است که برای bg div نیاز داریم، اکنون فقط باید بقیه موارد خود را استایل کنیم page (اگرچه این کاملا اختیاری است، اما روی پیمایش اختلاف منظر تأثیری ندارد):

section {
 color: #fff;
 font-family: arial;
 width: 500px;
 margin: auto;
 line-height: 20px;
 font-size: 16px;
}

پیمایش را امتحان کنید page اکنون و خواهید دید که متن اسکرول می‌شود اما پس‌زمینه ثابت می‌ماند، ما با jQuery خود آن را تغییر می‌دهیم:

جی کوئری

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

function parallax(){
 var scrolled = $(window).scrollTop();

حالا برای اینکه پس‌زمینه با سرعت متن حرکت کند، مقدار بالای div را مقدار منفی اسکرول قرار می‌دهیم، سپس تابع را می‌بندیم. اینطوری:

 $('.bg').css('top', -(scrolled) + 'px');
}

با این حال، نقطه پیمایش اختلاف منظر حرکت با سرعت متفاوت است، بنابراین برای تنظیم سرعت، مقدار را در کسری ضرب می کنیم، به عنوان مثال 0.2 برای 20٪:

function parallax(){
 var scrolled = $(window).scrollTop();
 $('.bg').css('top', -(scrolled * 0.2) + 'px');
}

فقط یک کار دیگر برای اجرای افکت وجود دارد و آن فراخوانی تابع هر بار که رویداد اسکرول فعال می شود:

$(window).scroll(function(e){
 parallax();
});

با انجام این کار، کد ما کامل است. اگر فایل را تست کنید، می بینید که کار می کند. برای تغییر سرعت، باید کسر تابع را تغییر دهیم. کسرهای کوچکتر سرعت را کاهش می دهند و کسرهای بالاتر آن را افزایش می دهند. شما می توانید نتیجه نهایی این کد را در اینجا ببینید این قلمی که من خلق کردم

نتیجه

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

آیا از افکت اختلاف منظر در پروژه ای استفاده کرده اید؟ آیا روش بهتری سراغ دارید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر پرسپکتیو کشویی از طریق Shutterstock.