طراحی سایت پارالاکس

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

یکی دیگر از ویژگی طراحی سایت با پارالاکس ، فراهم آوردن امکان مشاهده صفحات سایت با زاویه دید 180 درجه برای کابران است . به این صورت که اگر مثلا صفحه نمایش شما 1024 پیکسل و صفحه وب با عرض 1366 پیکسل طراحی شده باشد ، با حرکت ماوس به سمت راست یا چپ می توان صفحه وب را به طور کامل مشاهده کرد ، به گونه ای که اجزای صفحه  در محل قرارگیری خود ثابت باشند ولی با حرکت ماوس به طرفین بتوان سایر اجزای صفحه را نیز مشاهده کرد .

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

مزایای استفاده از طراحی سایت پارالاکس :

1) زیبا سازی صفحات با افزودن حرکات و عمق دادن به صفحه
2) ترقیب بازدید کنندگان سایت، جهت باز دید از تمامی صفحه و مطالعه کل مطالب
3) بالا بردن زمان بازدید از صفحه اصلی
4) افکت های بکار رفته در این نوع طراحی سبب جذب و حفظ کاربر می گردد .

طراحی سایت پارالاکس برای چه سایت هایی کاربردی تر است ؟

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

ارتباط طراحی سایت پارالاکس و سئو سایت :

سئو سایت اینتن : طراحی سایت پارالاکس گزینه مناسبی برای مواردی که می خواهید مطالب فراوان و لینک ها و صفحات متعددی را به گوگل معرفی کنید ، نیست . اما در صورتی که مجبور هستید از این نوع طراحی استفاده کنید، تلاش کنید که مطالب سایت شما توسط لینک ها و اطلاعات پایه  مجزا به map گوگل معرفی گردد . در این صورت همه  مطالب موجود در سایت شما به عنوان یک صفحه  معرفی نــخواهد شد .

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

توضیح  نکات اصلی و ابتدایی برای ایجاد یک صفحه با تکنیک پارالاکس  :

جهت پیاده سازی تکنولوژی پارالاکس مهم است که هم طراح گرافیک سایت تا حدودی با پارالاکس آشنا باشد و هم برنامه نویس بتواند طرح ها را توسط پارالاکس به درستی پیاده سازی کند . با استفاده از  html5،css3  و Jquery   می توان به تولید و طراحی سایت پارالاکس پرداخت.

دو راه برای ایجاد صفحات پارالاکس وجود دارد :

1. نوشتن کد صفحات
2. توسط افزونه های جی کوئری

برای ایجاد یک صفحه پارالاکس به روش اول به صورت زیر عمل می کنیم :

1. اولین کار لود کردن کتابخانه جی کوئری در صفحه  است .
2. سپس نیاز به کدی داریم که هر زمان روی گزینه مورد نظرمان کلیک شد ، صفحه سایت به سمت اطلاعاتی که از پیش تعیین کردیم اسکرول بخورد. کدهای زیر به این منظور استفاده می شوند :

Function ScrollToElement(selector,time,verticalOffset)

{time=typeof(time) != ‘undefined’ ?time:1000;

VerticalOffset=typeof(VerticalOffset) !=undefined ? VerticalOffset:0 ;

Element =$(selector) ;

3. به کدی نیاز داریم تا هنگامی که روی گزینه مورد نظرمان کلیک شد ، محتویت مربوط به آن گزینه نمایش داده شود . کد های زیر به این منظور استفاده میشوند :

$(document).ready(function(){

      $(“#nav-home”).click(function(){

                  ScrollToElement(‘#home’);

});

});

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

4. کد زیر نیز نشان دهنده Home page  است :

<div class=”content” id=”home”>…</div>

نمونه هایی از سایت های طراحی شده توسط تکنیک پارالاکس  را در لینک های زیر می توانید ببینید:

http://www.mitchlana.com

http://everylastdrop.co.uk