عضویت در پرتال

عضویت در پرتال پشتیبانی

پرتال پشتیبانی

ورود به پرتال پشتیبانی

×

هشدار

JUser: :_بارگذاری :نمی توان کاربر را با این شناسه بارگذاری کرد: 105

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

پارالاکس چیست؟

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

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

 بدون شک ایده های زیادی برای اجرای این نوع سایت ها (و البته بازی) وجود دارد. در این سایت می توانید 30 نمونه از وب سایت هایی که از این تکنیک استفاده کرده اند را مشاهده نمایید.

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

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


با پارالاکس آشنا شوید

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

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

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

 چگونه یک سایت پارالاکس طراحی کنیم؟

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

 برای پیاده سازی این تکنولوژی چندین پلاگین وجود دارد مثل parallax.js که شما میتوانید استفاده کنید.

بازدید 1939 بار آخرین ویرایش در سه شنبه, 30 آذر 1395 ساعت 16:57

اضافه کردن نظر


کد امنیتی
تازه سازی