پارالاکس (Parallax) چیست؟
تا به حال شده بخواهید روشی به غیر از CSS یاد بگیرید و سایت خود را جذاب تر از قبل کنید؟ فکر می کنید سایتی که کاربر محور است جایگاه بهتری دارد یا سایتی که محتوا محور است؟ اگر علاقه به این دارید که سایت شما کاربر محور یا کاربر پسند باشد، این مقاله کمک بسیاری به شما در شناخت تکنولوژی پارالاکس و جذابیت سایت شما می کند. فراموش نکنید که قبل از کار با پارالاکس باید زبان های Html ،Css و Jquery را یاد بگیرید.
پارالاکس (Parallax) چیست؟
پارالاکس یک تکنولوژی جدید در طراحی سایت به حساب می آید که به صورت یک افکت در سایت های تک صفحه دارای اسکرول به وجود می آبد. یکی از دلایلی که این تلکنولوژی را جذاب کرده است، ارتقاء بخشیدن به تجربه کاربری به وسیله تصاویر می باشد. شما با اسکرول کردن در صفحه می توانید تمام اجزاء صفحه را به صورت 2 بعدی مشاهده نمایید. Parallax تکنولوژی می باشد که صفحه 2 بعدی را به صورت 3 بعدی به شما نمایش می دهد. نمونه های اولیه تکنولوی پارالاکس بازی‌های کامپیوتری دو بعدی Jump Bug در 1981، Moon Patrol و Jungle Hunt در 1982 می باشند.
روش‌های پارالاکس
Layers
Layers یکی از روش های ایجاد پارالاکس می باشد که از سیستم های نمایشی پشتیبانی می کند و از لایه ها پس زمینه به صورت متعدد تشکیل شده است. Layers دارای قابلیت اسکرول افقی و عمودی می باشد که با لایه های مختلف ترکیب می شود و Parallax را ایجاد می کند.
Repeating Pattern
در این روش پارالاکس از اسکرول تصاویر، مربع های جداگانه و لایه های تصاویر تکرار شونده ساخته می شود. لازم است بگوییم که مربع ها دارای قابلیت شناور بودن رابر روی لایه پس زمینه می باشد.
Sprite
پارالاکس در این روش به صورت لایه های مجازی و از ترکیب تصاویر متفاوت ساخته می شود. فراموش نکنید که تصاویر در قالب یک تصویر هستند و می توانید یا مشخص کردن موقعیت تصویر در زاویه دلخواه، یک قسمت را مشاهده نمایید. با این روش می توانید اثری 3 بعدی در flat بسازید. با قرار دادن اشاره گر موس بر روی هر قسمت از تصویر، تنها همان قسمت قابل مشاهده می باشد.
Raster
در این حالت Parallax به صورت یک لایه ساخته می شود. این روش به این صورت عمل می کند که، تصاویر از بالا به پایین ترکیب می شوند و باعث تاخیر کوچکی در رسم خطا های صفحه می شوند. بازی های Sonic the Hedgehog و Street Fighter با این روش ساخته شده اند.
قالب های Parallax
 |
Parallax دارای قالب های مختلفی می باشد که در این قسمت به آن ها پرداخته می شود.
- قالب آوادا
- قالب انفولد
- قالب Be
- قالب بلازوک
ویژگی های قالب های پارالاکس
 |
پارالاکس دارای ویژگی های جذاب و کاربردی زیر می باشد.
- استفاده از قالب پارالاکس متناسب با موضوع و کاربرد وب سایت
- طرح یک داستان تصویری بر اساس هویت برند
- سرگرم نگه داشتن مخاطبان در صفحه
- هدایت بازدیدکنندگان جهت انجام اقدام موثر
- سازگاری بهینه صفحه با دستگاه ها و مرورگر های گوناگون
- به کارگیری تکنیک پارالاکس در طراحی بدون لطمه زدن به عملکرد و سرعت وب سایت
نحوه استفاده از پارالاکس در طراحی سایت
نکاتی درباره استفاده از Parallax در طراحی سایت وجود دارد که باید قبل از استفاده از آن به آنها توجه نمایید. این نکات شامل موارد زیر می باشند.
- پشتیبانی نشدن سایت های طراحی شده به وسیله Parallax، از سمت گوشی های هوشمند کاربران و مشتریان.
- استفاده کردن از این تکنولوژی برای معرفی بهتر محصول و ایده خود نه سایت های خبری، دانلودی و …
- برای استفاده از Parallax باید زبان CSS3 و javascript را بلد باشید.
- برای طراحی parallax scrolling تنها می توانید از CSS3 و javascript استفاده نمایید.
آموزش قرار دادن افکت Parallax در قالب
برای قرار دادن افکت پارالاکس در سایت خود، باید زبان پایه برنامه نویسی (Html و Css) را بلد باشید. ادامه به نحوه اضافه کردن افکت پارالاکس در سایت می پردازیم.
گام اول: ایجاد ناحیه مورد نظر برای قرار دادن عکس پارالاکس (Parallax)
برای ایجاد ناحیه در سایت خود، طبق دستور زیر کد نویسی کنید.
| <div class=”parallax”> <div class=”parallax-content”> محتوای شما در این جا قرار می گیرد… </div> </div> |
گام دوم: استایل دادن به افکت پارالاکس (Parallax) به وسیله زبان CSS
برای اینکه بتوانید به Parallax ایجاد شده استایل بدهید، باید کد نویسی زیر را انجام دهید.
| } parallax. ;(“background-image: url(“image/my-background-image.jpg ;height: 100% ;background-attachment: fixed ;background-position: center ;background-repeat: no-repeat ;background-size: cover ;margin-left:-410px ;margin-right:-410px { }parallax-content. ;width:50% ;margin:0 auto ;color:#FFF ;padding-top:50px { |
به جای my-background-image.jpg در کد بالا، باید مسیر تصویر آپلود شده را وارد نمایید.
اثر پارالاکس (Parallax) بر وب سایت
با تغییر بازار کسب و کار و روش های جذب مشتری به روش های آنلاین، طراحی سایت، تکنولوژی های جدیدی وارد بازار شده اند. پارالاکس یکی از تکنولوژی هایی است که طراحان برای زیباتر ساختن عناصر سایت خود و نمایش آنها به مشتریان خود از آن استفاده می کنند. Parallax به دلیل ایجاد تجربه کاربری جذاب، دلنشین و حرفه ای، در بین طراحان سایت (طراحانی که به زیبایی سایت بیشتر از محتوای سایت و سئو آن اهمیت می دهن) از محبوبیت خاصی برخوردار می باشد.
تاثیر استفاده از تکنیک پارالاکس (Parallax) بر سئو
همانطور که می دانید، سئو مشخص کننده رتبه سایت شما در سایت گوگل می باشد. زمانی می توانید رتبه سایت خود را بالا ببرید که تعداد صفحات شما زیاد باشد. تکنیک پارالاکس برای سایت های دارای صفحات زیاد مناسب نیست، به همین دلیل Parallax برای سئو نیز مفید نمی باشد. اگر کسب کار شما به صورتی می باشد که جذابیت و زیبا بودن سایت بسیار مهم باشد، پارالاکس سایت گزینه مناسب تری است. اما اگر سایت شما محتوا محور یا محتوای سایت و کسب کار شما مهم می باشد، باید به سئو سایت خود فکر کنید و از Parallax استفاده نکنید.
اسکرول پارالاکس (Parallax) مناسب چه سایت هایی می باشد؟
از اسکرول پارالاکس می توانید در طرحی سایت های زیر استفاده نمایید.
- سایت های شخصی (رزومه کاری)
- سایت فروشگاهی با تعداد کالای محدود
- سایت رستوران ها
- سایت سازمان های دولتی
- و …
اسکرول پارالاکس (Parallax) برای چه سایت هایی مناسب نیست؟
هیچ وقت از اسکرول پارالاکس برای طراحی سایت های زیر استفاده نکنید.
- سایت های تجاری بزرگ
- سایت فروشگاه های اینترنتی
- سایت های بزرگ
- و …
نمونه هایی از سایت های پارالاکس (Parallax)
در این قسمت تعدادی سایت که از تکنولوزی Parallax استفاده کرده اند و شما می توانید از آنها ایده بگیرید را به شما معرفی خواهد شد.
- سایت sketchthemes
- سایت royder.ir
- سایت nemachin.com
- سایت sunnyar.com
- سایت shahdineh.com
- سایت porsche evolution
- سایت myriad
- سایت lexus
- سایت walking dead
- سایت Boy cay
- سایت Hot dot
- سایت Mild Design
- سایت Nolan Omura
- سایت Chris Covert
- سایت Ivy Chen
- سایت Industrial Jewellery
- سایت Barco Sorriso
- سایت Karlie kloss
- سایت Hana Knizova
- سایت Protea
- سایت Frankie Ratford
کاربرد طراحی پارالاکس (Parallax)
تکنولوژی پارالاکس در طراحی سایت های دارای کاربران زیاد و صفحات کم کاربرد دارد. زمانی که سایت شما صفحات کمی داشته باشد و از Parallax استفاده نمایید، علاوه بر جذاب شدن سایت شما، کاربران شما نیز افزایش پیدا می کند. پارالاکس علاوه بر 2 موضوع اشاره شده، در طراحی سمینار ها، صفحات نمونه کار، صفحات ثبت نام، طراحی فوتر سایت و … نیز کاربرد دارد.
مزایا و معایب پارالاکس (Parallax)
 |
مزایای Parallax
- دادن عمق و حرکت و در نهایت زیبایی به صفحه
- استفاده از حرکت جهت معرفی محصولات، خدمات و تاریخچه فعالیت های شرکت
- زمان بازدید از صفحه اصلی وب سایت را بالا می برد
- تحریک حس کنجکاوی کاربر جهت بازدید از کل صفحه و خواندن متن ها
- افزایش اعتبار وب سایت شما در بین کاربران به واسطه محیطی خلاقانه
- آسانتر کردن هدایت کاربر به قسمتی از وب سایت
- معرفی محصول با روشی خاص و پر رنگ کردن نکات مثبت آن به شیوه ای جذاب را فراهم می کند.
معایب پارالاکس
- ضعیف بودن سئو سایت به دلیل تک صفحه ای بودن سایت و عدم تعریف title ،description و keywords های متعدد در سایت
- بالا بودن زمان بارگذاری سایت به دلیل قرار دادن تمام حجم اطلاعات و تصاویر تنها در یک صفحه و بستن سایت به وسیله کاربر
- وجود نداشتن پیوند صفحات داخلی (Internal page linking) در سایت
سخن پایانیبه دلیل بیشتر شدن علاقه کاربران به زیبا سازی سایت ها در دنیای طراحی سایت، ابزار های مختلفی برای زیبا سازی سایت ها به طراحان معرفی می شود. یکی از این ابزار ها پارالاکس می باشد، این ابزار در بین طراحان سایت از محبوبیت خاصی برخوردار است. شناخت تکنولوژی یا ابزار پارالاکس برای شما بسیار کاربردی خواهد بود که در این مقاله به طور کلی درباره Parallax صحبت کرده ایم. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید