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

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

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

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

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

از طراحی سایت پارالاکس در طراحی سایت هایی که بیشتر جنبه تبلیغاتی دارند و برای معرفی یک شرکت و یا یک برند هستند استفاده می شود و زیبایی و اعتبار بسیاری می تواند به آن محصول و سایت بدهد و برای کاربران و بازدید کنندگان سایت بسیار جذاب باشد. و می تواند برای شناساندن یک محصول و یک برند بسیار مفید باشد.از این رو حتی بسیاری از شرکت ها وکمپانی های بزرگ دنیا مانندApple و Nike ازاین روش برای سایت و تبلیغ محصولات خود استفاده کرده اند.

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

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

مشکلات اجرایی

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

۱.سنگین شدن صفحات وب سایت

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

2.آسیب به سئو سایت

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

نسل پیشرفته تر تکنولوژی پارالاکس

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

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

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

چند نمونه از طراحی سایت پارالاکس موفق

۱-  نمونه طراحی سایت پارالاکس porsche evolution سایتی است که محصولات شرکت porsche را از سال1930 تا 2020 وتحولات در طراحی و ساخت اتومبیل های porsche را نشان می دهد.

۲-  نمونه طراحی سایت پارالاکس myriad  که در رابطه بامبلمان و طراحی داخلی است.

“در حال حاضر وب سایت موقتا در دسترس نیست”

3-  نمونه طراحی سایت پارالاکس lexus که در رابطه با نمایش محصولات شرکت lexus است.

برای مشاهده ی سایت کلیک کنید.

۴-  نمونه طراحی سایت پارالاکس برای خودرو سازی walking dead که یک سایت پارالاکس انیمیشنی است که به صورت داستانی است.

برای مشاهده ی سایت کلیک کنید.

۲-  نمونه وب سایت پارالاکس The boat که رمان گرافیکی یک صفحه ای است و داستانی حیرت انگیز درباره فرار از جنگ ویتنام با یک قایق را روایت می کند پیشنهاد میکنیم از این سایت زیبا و خلاقانه دیدن کنید.

“ برای مشاهده ی سایت کلیک کنید.

نتیجه گیری

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