طراحی سایت پارالاکس چیست و چطور سایت شما را جذاب می‌کند؟

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

• طراحی سایت پارالاکس چیست؟
• مزایای طراحی سایت پارالاکس
• معایب طراجی سایت پارالاکس 
• روش اضافه کردن این نوع طراحی به وبسایت 
• افزونه ها و کدهای مورد نیاز برای طراحی پارالاکس 

پیشنهاد می‌کنیم مطالعه کنید:

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

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

شاید در بسیاری از سایت‌های به خصوص وردپرسی ویژگی پارالاکس را دیده باشید، بی آنکه دقیقا بدانید که چیست؟ خب اجازه بدهید اول شما را به بازدید از یکی از این سایت‌ها دعوت کنیم و بعد بحث اصلی را شروع کنیم. همین حالا روی لینک سایت The Goonies یا سایت Webfllow و Defeat B.O.C.O کلیک کنید و کمی در این وبسایت‌ها بالا و پایین بروید.

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

حالا اگر بخواهیم تعرییف جامعی از طراحی سایت پارالاکس ارائه بدهیم باید بگوییم که این نوع طراحی از پیمایش و اسکرول برای ایجاد توهم عمق و فضای 2D استفاده می‌کند. به این ترتیب که طراح از طرح‌های مختلفی در پیش زمینه و پس زمینه استفاده می‌کند که با سرعت‌های مختلفی حرکت میکنند. به این ترتیب یک سیر داستانی در سایت به حرکت در می‌آيد که خیلی بهتر مفاهیم را انتقال می‌دهد.

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

طراحی پارالاکس چطور کار می‌کند؟

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

در سال‌های اخبر با پیشرفت در CSS و HTML از آن حالت سنتی خارج شد و رفته رفته به همین تکنیکی که در دنیای طراحی سایت می‌شناسیم تبدیل شد.

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

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

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

معایب طراحی سایت پارالاکس

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

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

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

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

• آیا مخاطبان شما در رنج سنی بالایی هستند؟
• آیا مخاطبان و بازدیدکنندگان شما در مناطق جغرافیایی با سرعت اینترنت پایین زندگی می‌کنند؟
• آیا عموم بازدیدکنندگان سایت شما افرادی با تحصیلات پایین یا کم توان در به کارگیری تکنولوژی هستند؟
• آيا کاربرانی که به سراغ سایت شما می‌آیند معمولا کارهای فوری با سایت شما دارند و به پیمایش سریع بیش از جلوه‌های بصری اهمیت می‌دهند؟

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

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

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

چطور طراحی پارالاکس انجام بدهیم؟

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

۱. کدنویسی با HTML و CSS

این روش ممکن است پیچیده به نظر برسد اما ما کدهای موردنیاز را در اختیارتان قرار می‌دهیم. شما فقط مطمئن شوید که به راحتی می‌توانید در وردپرس، تم‌ها را ویرایش کنید. اول از همه از ساید بار ورد پرس این مسیر را طی کنید:        Appearance > Theme Editor

سپس در قسمت Theme Files فایل بخشی که می‌خواهید تصویر را در آن اضافه کنید پیدا کنید.

حالا بسته به جایی که قرار است این تصویر قرار بگیرد به قسمت‌های هدر فوتر یا سنتر بروید. اگر قرار است تصویر را در هدر ذخیره کنید  دنبال پرونده‌ای به نام  “header.php”  یا “Header” بگردید. در صورتی که دنبال صفحه ای خاص یا تمپلیتی خاص هستید دنبال پرونده‌ای به نام “Single Page” یا “Page Template” باشید.

حالا وقتی پرونده مورد نظر را پیدا کردید کد زیر را در آن کپی کنید:

<div class=“parallax”></div>

بعد تصویر پس زمینه پارالاکس خود را در Library  وردپرس بارگذاری کنید و URL تصویر را برای مرحله بعد ذخیره کنید.

سپس به مسیر زیر بروید و کد CSS را در آن کپی کنید :    Appearance > Customize > Additional CSS

کد CSS که باید کپی کنید به شرح زیر است:

.parallax {

  background-image: url(“image.png”);

  height: 400px;

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

حتماً فایل “image.png” را با URL تصویر پس زمینه خود جایگزین کنید.

۲. استفاده از تم های آماده

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

۳. از پلاگین های وردپرس استفاده کنید

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

Advanced WordPress Backgrounds

Parallax Image

این دو افزونه پس از اضافه کردن کد کوتاه ساده به محتوا ، اثر پارالاکس را به سایت شما اضافه می کند. آنها با سازندگان صفحه اصلی WP مانند WPBakery و Elementor سازگار هستند.

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

جمع بندی

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