مجله ی بهینه سازی وب

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

این مورد را ارزیابی کنید
(1 رای)
فکر میکنم تا به امروز عبارت ” پارالاکس ” رو در طراحی سایت زیاد شنیده باشید. در این مقاله قصد دارم در رابطه با پارالاکس و کاربردهای اون خدمتتون توضیحاتی رو ارائه بدم. پس از روی کار اومدن تکنولوژی پارالاکس تا مدتی اکثر افراد تصور می کردند که اگر لایه های موجود در صفحات سایت با اسکرول صفحه، ظاهر شوند پارالاکس محسوب میشه؛ در صورتی که این تصور کاملا اشتباه بود.

در رابطه با پارالاکس بیشتر بدانیم!

این تکنولوژی برای طراحی سایت بصورت single page یا one page روی کار اومد ، اما با گذشت زمان دیده شد که طراحان از این متد در طراحی های عادی هم استفاده کردند، البته در اصل در استاندارد طراحی مشکلی بوجود نمیاره چه بسا که زیبایی خاصی هم به صفحات میده.
در صفحات پارالاکسی ، با حرکت موس یا اسکرول صفحه ، روی عناصر موجود در صفحه افکتی اجرا میشه حالا این افکت میتونه جابجایی عناصر یا Blur شدن آنها باشه ( قصد دارم در قالب بعدی آرمانیک این افکت رو پیاده کنم ) یه نکته این بین هست که پارالاکس رو با افکت های دیگه متمایز میکنه اونم اینه که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا اسکرول، افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره. در غیر این صورت با css animate هم می تونیم به راحتی ظاهر شدن عناصر در صفحه با اسکرول رو اجرا کنیم. افکت دیگه ای که شما توی پارالاکس میتونید پیاده کنید این هست که ، با حرکت موس از راست به چپ یا چپ به راست میدان دید اصلیتون رو تغییر بدید و فراتر از میدان دیدتون عناصر و جزییات صفحه رو مشاهده کنید، به عبارتی شما میتونید صفحه ی وب رو بصورت ۱۸۰ درجه ببینید به نحوی که عناصر سر جای خودشون قرار دارن و شما میتونید عرض صفحه رو از سمت راست به چپ و بالعکس و فراتر از عرض ثابت صفحه مشاهده کنید.
پارالاکس
پارالاکس

  اصلا پارالاکس چی هست ؟!

برای درک بهتر این موضوع فرض کنید صفحه مانیتور شما ۱۰۲۴ پیکسل طراحی شده ، و صفحه وب شما با عرض ۱۳۶۶ پیکسل طراحی شده، شما صفحه ی وبتون رو در مرکز تصویر به اندازه ی همون ۱۰۲۴ پیکسل میبینید، حالا اگر در طراحی سایت از پارالاکس استفاده کنیم ، میتونیم با چرخاندن موس به سمت راست یا به سمت چپ عناصری که خارج از میدان دید شما در ۱۰۲۴ پیکسل هست رو نیز ببینید. با مشاهده ی تصویر زیر درک این توضیحات میتونه براتون بهتر باشه : یکی دیگه از افکت های جذابی که توی پارالاکس پیاده میشه ، ترکیب چند لایه تصویر روی هم هست که هر لایه با حرکت موس یا اسکرول صفحه با سرعت خاصی اجرا میشه و یک افکت حرکتی زیبارو تشکیل میده.
در تصویر بالا اگر دقت کنید میبینید که چند لایه تصویر روی هم قرار گرفته و در نهایت در نگاه اول تصویر زیر رو به شما نمایش میده:
پارالاکس طراحی وب
پارالاکس طراحی وب
حالا با حرکت موس یا اسکرول صفحه هر لایه از این تصاویر با یک سرعت خاص و مشخص حرکت می کنند و یک تصویر متحرک بسیار زیبارو به شما نمایش میده، این حرکات به گونه ای هست که به شما احساس زنده بودن عناصر رو میده . گاهی اوقات با ترکیب چند متد و تکنولوژی همراه با پارالاکس می تونید انیمیشن های زیبایی رو در صفحه ی وبتون خلق کنید و جذابیت صفحه رو چند برابر کنید. برای پیاده سازی این تکنولوژی شما میتونید از پلاگین های موجود استفاده کنید ، یکی از پلاگین های پرکاربرد و محبوب parallax.js هست که در مقالات آتی نحوه ی کار با این پلاگین رو هم آموزش خواهیم داد.
خواندن 1312 دفعه
پوریا سبحانلو

پوریا سبحانلو هستم دانشجوی ارشد نرم افزار  | برنامه نویس زبانهای اسکریپتی سمت سرور

چند وقتیست علاقه به علم بهینه سازی وب پیدا کردم  و پروژه های مرتبط با اون رو قبول میکنم.

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

وبگاه: www.psobhanlo.ir پست الکترونیکی این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

نظر خود را اضافه کنید.

ارسال نظر به عنوان مهمان

0
شرایط و قوانین.

کاربرانی که در این گفتگو شرکت کرده اند

درباره وب سایت دیجیتال مارکتینگ

 وب سایت دیجیتال مارکتینگ یکی ار وب سایت گروه طراحی وب پارسیان (پارسیان تبلیغ) است که در زمینه دیجتال مارکتینگ و بازاریابی دیجیتال فعالیت میکند.

در وب سایت دیجیتال مارکتینگ خدمات مرتبط با دیجیتال مارکتینگ ارائه می شود

دیجیتال مارکتینگ چیست؟

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

تماس با دیجیتال مارکتینگ

برای تماس با وب سایت دیجتال مارکتینگ 

021-88359674

 

از پی اس سئو حمایت کنید