در حرکت، اختلاف منظر به معنای تغییر مکان یک جسم در برابر پس زمینه ای نسبت به ناظری است که در محل قرار دارد. این اصطلاح در اینترنت محبوبیت پیدا کرده است. به طور خاص، سایت جالب به نظر می رسد، که در طراحی آن عناصر پویا وجود دارد. Parallax یک تکنیک طراحی صفحه وب است که توسط وب مسترها برای جذب تعداد زیادی از بازدیدکنندگان استفاده می شود.
پارالاکس چگونه است
پیمایش پارالکس را می توان به صورت عمودی و همچنین در یک خط مستقیم استفاده کرد. نینتندو بهترین نمونه است. بسیاری از ما با نوستالژی بازی های رایانه ای را به یاد می آوریم که با حرکت شخصیت های اصلی از سمت چپ صفحه به سمت راست نمایش داده می شود. همچنین می توان به سمت پایین حرکت کرد که در امتداد یک خط مستقیم واقع شده به صورت عمودی انجام می شود. اثر اختلاف منظر در وب اغلب استفاده می شود. می توانید از جاوا اسکریپت یا CSS برای ایجاد یک نوار لغزنده عمودی استفاده کنید. 3.
اثر فضایی سه بعدی توصیف شده فقط مشخصه آنهاست. سازندگان بازی ها از چندین لایه پس زمینه استفاده کردند. آنها در بافت متفاوت هستند، در حالی که حرکت با روش های مختلف انجام می شودسرعت.
فکر نکنید که اختلاف منظر فقط یک افکت سه بعدی است. در صفحه می توانید آیکون های موجود را جابجا کنید. علاوه بر این، بسیار جذاب به نظر می رسد. یک گزینه به خصوص خوب استفاده از یک مسیر جداگانه برای هر یک از آنها است. در این مورد، از نمادهای مختلف استفاده می شود که در طول مسیرهای مختلف حرکت می کنند. این طراحی جلب توجه می کند.
تصویر جان می گیرد
پیدا کردن سایتی بدون عکس سخت است. نقاشی های با کیفیت و نمایشی بازدیدکنندگان را به خود جلب می کند. اما بیشترین توجه به انواع مختلف تصاویر پویا جلب می شود. در واقع، اگر هنگام بازدید از یک سایت حرکتی وجود داشته باشد، این توجه را به خود جلب می کند. به طور قابل توجهی احتمال بازگشت بازدیدکننده به یک منبع به یک تصویر پویا را افزایش می دهد. به نظر حرکت کرد یا نه؟ بنابراین، برای جذب بازدیدکنندگان به سایت، ارزش مطالعه چیزی مانند اثر اختلاف منظر را دارد.
مثال های سایت تصویر متحرک:
- hvorostovsky.com;
- www.kagisointeractive.com.
همانطور که در مثال‌ها نشان داده شده است، تجربه با منوهای کشویی در آیتم‌های فرعی بهبود می‌یابد. چنین عنصری در زمان برای بازدیدکنندگان صرفه جویی می کند، بنابراین برای آنها جذاب است.
کتابخانه jQuery
اصطلاح jQueryParallax کتابخانه ای به همین نام را تعریف می کند. به لطف آن، دستیابی به اثر حرکت در قالب سه بعدی آسان است. در کتابخانه jQuery، ادراک سه بعدی به روش های مختلفی ایجاد می شود. یکی از آنها شامل حرکت افقی همزمان اشیاء پس زمینه باسرعت متفاوت این کتابخانه با وجود تعداد زیادی از انواع مختلف ویژگی مشخص می شود. و جابه‌جایی که در اینجا توضیح داده شد، تنها بخش کوچکی از قابلیت‌های آن است.
این سایت کاملاً جذاب به نظر می رسد که برای ایجاد آن از عناصر مدرن مختلفی استفاده شده است. یکی از آنها اختلاف منظر است. سایت‌های نمونه ممکن است به این شکل باشند:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallax با لایه هایی که با ماوس حرکت می کنند نشان داده می شود. عناصر پویا با موقعیت مطلق مشخص می شوند (موقعیت: مطلق؛). هر یک از آنها با اندازه و حرکت با سرعت فردی مشخص می شود. این می تواند متن یا تصویر (به درخواست سازندگان منبع) باشد.
ادراک بازدیدکننده سایت
پس از آن معمولاً شخص به این نکته توجه می کند که صفحه با کیفیت بالا، راحت و دانش طراحی شده باشد. این واقعیت معمولاً محترم است. این اتفاق می افتد که کنجکاوی برای آزمایش عناصر دیگر ایجاد می شود. تعداد زیادی سایت مشابه در اینترنت وجود دارد. چگونه منبع خود را خاص کنید؟
اگر طرح را دوست داشته باشید، بازدیدکننده برای مدت طولانی تری می ماند. بنابراین، احتمال اینکه او توسط اطلاعات ارسال شده جذب شود افزایش می یابد، او علاقه نشان می دهد. در نتیجه، شخص از خدمات، محصول یا پیشنهاد تبلیغاتی ارائه شده استفاده خواهد کرد.
بازی های قدیمی مورد علاقه
مفهوم "پارالاکس" باید برای همه آشنا باشدطرفداران کنسول های دهه 80 و 90. این برای بازی ها صدق می کند:
- Mario Bros.
- Mortal Kombat.
- خیابان های خشم.
- گشت ماه.
- لاک پشت ها در زمان.
یعنی اختلاف منظر تکنیکی است که برای مدت طولانی مورد استفاده قرار گرفته است. این بازی ها واقعا با کمی نوستالژی به یاد می آیند. به هر حال، به نظر می رسد که آنها با شخصیت آن دوره آغشته شده اند.
تصاویر روی صفحه با استفاده از تکنیکی مانند پیمایش اختلاف منظر ایجاد می شوند. هیچ چیز شگفت انگیزی در این واقعیت وجود ندارد که این تکنیک محبوبیت شایسته ای به دست آورده است. این مفهوم طراحی به گرمی توسط کسانی که در دهه 80-90 بازی می کردند یا اوقات فراغت دوستان را تماشا می کردند، مورد استقبال قرار گرفت.
پیمایش پارالکس
بازاریابان برندهای پیشرو جهان مدت‌هاست که از انواع پیشرفت‌های فنی استفاده می‌کنند. بنابراین، علاقه مندی حتی یک بازدیدکننده معمولی به سایت امکان پذیر می شود.
پیمایش پارالکس با موفقیت توسط نایک استفاده شده است. وب سایت اصلی این شرکت توسط ویدن و کندی طراحی شده است. اما این طرح دوام نیاورد. منبع به تدریج مطابق با روند زمان ما به روز شد. Activatedrinks.com نمونه ای از سایتی است که طراحی آن یادآور سایتی است که توسط بازاریابان نایک در آن دوره استفاده می شد.
بلندگوها نباید زیاد باشند
فراموش نکنید که طراحی سایت اغلب معیار کلیدی است که بازدید کننده را راهنمایی می کند. ضعیف اجرا شده استاین منبع معمولاً کاربر را با تصور بیهودگی شرکت مالک به جا می گذارد. اما سایتی با انواع عناصر طراحی جذاب نشان دهنده تمایل صاحبان سازمان به جلب توجه بازدیدکنندگان است.
در اینجا لازم است در مورد اختلاف منظر یادآوری کنیم. این یک ابزار فوق العاده است. اما حتی آنها نیز نباید بیش از حد گمراه شوند. زیرا صفحه ای که در آن تعداد زیادی از انواع مختلف عناصر متحرک وجود دارد، درک آن بسیار دشوار است. بهتر است طراحی نسبتاً شیک و قابل درک باشد.
Dynamic باید عناصر فردی باشد که نیاز به انتخاب دارند. همچنین ممکن است تصویری وجود داشته باشد که با استفاده از لایه هایی که یکی نسبت به دیگری حرکت می کنند ایجاد شود. فراموش نکنید که سایت کاربر در درجه اول برای بازدیدکنندگان طراحی شده است. لازم نیست که شاهکار یک مدیر وب باشد که تمام دانش خود را در آن قرار داده است. به هر حال، چنین رویکردی فقط ادراک را پیچیده خواهد کرد.
چگونه یک ناوبری سایت ایجاد کنیم
چگونه اختلاف منظر ایجاد کنیم؟ این سوال مورد توجه بسیاری از سازندگان وب سایت است. نیازی به دانستن پیچیدگی های نوشتن برچسب ها نیست. استفاده از منابع ویژه در اینترنت بسیار راحت است. از تعداد زیاد پیشنهادهای موجود، کمک کنندگان زیر را می توان متمایز کرد:
- Plax برنامه ای است که استفاده از آن نسبتاً آسان است. با حرکت دادن ماوس صفحه را روان می کند.
- jQuery Parallax Image Slider - یک پلاگین jQuery که برای ایجاد لغزنده های تصویر استفاده می شود.
- Jquery Image Parallax - مناسب برای طراحی نقشه های شفاف. با استفاده او از PNG، گیف‌ها عمق پیدا می‌کنند و با حرکت متحرک می‌شوند.
- Curtain.js برای ایجاد یک صفحه با پانل های ثابت استفاده می شود. در این صورت اثر باز شدن پرده ها مشاهده می شود.
- Scrolling Parallax: یک پلاگین jQuery برای ایجاد یک افکت اختلاف منظر هنگام پیمایش چرخ ماوس است.
چند افزونه مفید دیگر
همانطور که می دانید، اطلاعات بیشترین ارزش را دارند. و هر چه تعداد راه های رسیدن به مطلوب بیشتر شناخته شود، احتمال به دست آوردن نتیجه صحیح نزدیک تر است. پلاگین های مفیدی که برای ایجاد پویایی استفاده می شوند:
- jQuery Scroll Path - برای قرار دادن اشیا در مسیر مشخص شده استفاده می شود.
- Scrollorama یک پلاگین جی کوئری است. به عنوان ابزاری برای طراحی متریال جذاب استفاده می شود. به شما امکان می دهد به دلیل پیمایش راحت، متن موجود در صفحه را "احیا کنید".
- Scrolldeck یک پلاگین جی کوئری است. این یک راه حل ارائه عالی برای سایت های تک صفحه ای است.
- jParallax حرکت لایه ها را بسته به حرکت اشاره گر ماوس نشان می دهد.
- Stellar.js پلاگینی است که با آن هر عنصری با افزودن افکت پیمایش اختلاف منظر طراحی می شود.
Parallax به مکان نما متصل شد
این اختلاف منظر کاملاً چشمگیر به نظر می رسد. بی حرکت در نگاه اولاشیاء صفحه سایت با نزدیک شدن نشانگر ماوس حرکت می کنند. به نظر می رسد زنده می شود و عنصر در حال حرکت را دنبال می کند.
ابتدا باید روی تصویر توقف کنید. تصویر مورد نیاز در یک قاب قرار می گیرد، در حالی که لبه های آن باید پنهان باشد. روش بسیار ساده است، و نقاشی حاصل کاملاً جذاب به نظر می رسد.
افکت Parallax برای سایت یک روش فوق العاده برای طراحی است. استفاده از آن نشان می دهد که توجه لازم به ایجاد منبع شده است. بنابراین، توجه به خدمات ارائه شده و یا اطلاعات برای مطالعه ارزش دارد. چنین سایت‌هایی در مقابل پس‌زمینه منابع یکسان، اما ساده طراحی‌شده، سودمندتر به نظر می‌رسند.
