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

طراحی وب سایت بنا بر استفاده هایی که از آن می شود ممکن است به یکی از زبان های رایج برنامه نویسی صورت بگیرد.

در نهایت، صفحات هر سایت باهر زبانی که ایجاد شود، به زبان HTML ترجمه و نمایش داده خواهند شد.

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

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

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

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

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

این به دلیل عمقیست که تصویر در دید شما دارد.

از همین تکنیک در بازی های کامپیوتری مانند angry birds وجود دارد، شما احساس میکنید با پرتاب تیر به فاصله ی دورتری منتقل می شوید، در حالیکه این یک بازی دو بعدی است و عمق تصویر در بازی های سه بعدی معنا دارد.

این همان تکنیک پارالکس است.

در طی دو سال گذشته ای تکنیک به سمت طراحی سایت آمده و شاهد صفحاتی هستید که با اسکرول کردن آنها یا حرکت موس به سمت چپ یا راست حرکت را میبینیم.

برای استفاده از این تکنیک می بایست با css3، HTML5 و jQuery آشنایی داشته باشید.

البته در نرم افزارهایی مانند WordPress افزونه هایی برای این منظور وجود دارند.

با این روش شما می توانید افکت های حرکتی خاصی در صفحه ایجاد نموده و یا محتویات را بر اساس اسکرول خوردن صفحه تغییر دهید.

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

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

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

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

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

این تکنیک بیشتر ترفندی برای سایت های مارکتینگ و تبلیغات محسوب می شود که کاربر را با استفاده از بازی رنگها در صفحه نگه داریم.

برای شروع طراحی صفحه لازم است قوانین css3 و jQuery را بدانیم.

اما استفاده از کتابخانه ها و کدهای آماده css animate به شما کمک بسیاری میکند.

یعنی شما می توانید از فایل آماده css و نیز کتابخانه آماده jQuery استفاده کرده و صفحه پارالکس خود را بسازید.

استفاده از متد پارالکس روش های متعددی دارد اما روش و متد عرف آن استفاده از ویژگی یا attribute اتریبیوت data-[name]=yourdata است.

[name] نام متغییر شماست، yourdata نیز مقداری است که به آن متغیر داده می شود.

به عنوان مثال data-speed=”10” در سایت هایی که با این متد راه اندازی می شود، بخش بندی های سایت با تگ section انجام می شود.

در نمونه صفحه ی زیر یک صفحه وب سایت را با پس زمینه و محتوای متحرک خواهید دید.

در بخش اول این صفحه پس زمینه متحرک را مشاهده مینمایید و در بخش دوم باکس های متحرک که با تغییر اسکرول نمایش داده می شوند.

ایجاد چنین صفحاتی در حال حاضر که کدهای css animation آماده و همچنین jQueryهای آماده برای استفاده موجود است، با اعمال کمی دقت و سلیقه ممکن است.

تعدادی از سایتهایی که از این ویژگی ها استفاده می کنند در زیر لیست شده اند: http://www.

sony.

com/be-moved http://journey.

lifeofpimovie.

com http://matthew.

wagerfield.

com/parallax