پارالاکس در طراحی وب سایت چیست
پارالاکس تکنولوژي جديدي در طراحي وب سايت است که در آن با اسکرول صفحه يا حرکت موس، بر روي عناصر صفحه افکتي خاص اعمال ميشود. جذابيت اين تکنولوژي به دليل ارتقاي تجربه کاربري به وسيله عکسالعملهاي تصويري است. با اسکرول کاربر اجزاي مختلف صفحه وب سايت با سرعتهاي متفاوت حرکت ميکنند؛ حرکت آهستهتر پسزمينه نسبت به تصويرهاي پيشزمينه، باعث ايجاد تصور عمق در صحنهاي دو بعدي ميشود. به بيان ديگر پارالاکس پيمايش صفحه به گونهاي است که صفحهاي دو بعدي، به صورت سه بعدي ديده شود.
بازيهاي کامپيوتري دو بعدي Jump Bug در 1981، Moon Patrol و Jungle Hunt در 1982 از نمونههاي اوليه استفاده پارالاکس هستند.
بديهي است که با تغيير روند زندگي امروزي به سمت دنياي الکترونيک و افزايش نياز بازار به جذب مشتري به وسيله روشهاي آنلاين، طراحان وب در پي کشف و استفاده از راهکارهاي جديد در بهبود عملکرد جلوههاي تصويري زيباتر و جذب بيشتر کاربران هستند. پارالاکس نمونه بسيار خوبي از تلاش طراحان در اين زمينه است و هر روزه توجه طراحان بيشتري را به خود جلب ميکند.
ميزان جستوجوي عبارت (طراحي وب پارالاکس)
در اين روش همانطور که از معناي لغوي نام آن مشخص است، تغيير و اختلافي مشخص بين نمايش عناصر صفحه ايجاد ميشود که نمايي زيباتر از عناصر صفحه وب سايت را ارائه ميدهد. به کارگيري پارالاکس در طراحي وب سايت به دليل ايجاد تجربه کاربري دلنشين، روز به روز در حال افزايش است و توجه بسياري از طراحان حرفهاي وب سايت را به خود جلب کرده است.
روشهاي پارالاکس
روند پيادهسازي وب سايت پارالاکس در يکي از اين چهار گروه اصلي قرار ميگيرد و شما بنا بر نياز خود ميتوانيد آن را انتخاب کنيد:
Layers: پشتيباني سيستمهاي نمايشي از لايههاي پسزمينه متعدد با قابليت اسکرول افقي و عمودي مستقل که بر روي هم ترکيب شدهاند، امکان ايجاد پارالاکس را فراهم کرده است.
نمايش لايهها از اطراف
نمايش لايهها از بالا
Repeating Pattern: در اين روش اثر پارالاکس از اسکرول کردن تصاوير تشکيل شده از مربعهاي جداگانه که امکان شناور بودن بر روي لايه پسزمينه تکرار شونده را دارند، ايجاد ميشود.
Sprite: در اين روش لايههاي مجازي از ترکيب تصويرهاي مختلف در قالب يک تصوير ايجاد ميشوند. با تنظيم موقعيت تصوير در زاويههاي مختلف، تنها يک قسمت آن قابل مشاهده خواهد بود و ميتوان اثري سه بعدي در تصويري flat ايجاد کرد. اشاره موس به هر قسمت از تصوير، همان بخش تشکيل دهنده را نمايش خواهد داد.
Raster: برخي از سيستمهاي نمايشي تنها از يک لايه تشکيل شدهاند. بازيهاي پيچيده براي پيادهسازي گرافيک مورد نياز خود در اين سيستمها، لايهها را به نوارهاي افقي با موقعيتها و سرعت اسکرول متفاوت تقسيمبندي ميکنند. نوارهاي بالاتر، عناصر را در عمقي دورتر نمايش ميدهند. سپس يک تاخير افقي ايجاد شده و موقعيت اسکرول لايهها پيش از شروع رسم به وسيله سيستم تغيير ميکند؛ به اين روش اثر raster گفته ميشود. رديفهاي پيکسل تصوير، از بالا به پايين ترکيب و تجديد (compositing and refreshing) ميشوند و تاخير کوچکي در رسم خطهاي صفحه به وجود ميآيد. دو بازي معروف Sonic the Hedgehog و Street Fighter نمونههايي از اين روش هستند.
مزاياي پارالاکس
ذهن مخاطب را به وسيله انيميشن موجود و عمق تصوير، جذب و درگير وب سايت شما ميکند.
اعتبار وب سايت شما در بين کاربران را به واسطه محيطي خلاقانه افزايش ميدهد.
باعث افزايش کنجکاوي و تشويق کاربران به اسکرول کردن تمامي صفحات و در نتيجه افزايش زمان بازديد از وب سايت ميشود.
هدايت کاربر به قسمتي از وب سايت که دنبال کننده هدف خاصي است را آسانتر ميسازد.
امکان معرفي محصول با روشي خاص و پر رنگ کردن نکات مثبت آن به شيوهاي جذاب را فراهم ميکند.
معايب پارالاکس
با وجود مزيتهاي ذکر شده در بالا، پيش از استفاده از اين روش بايد معايب آن را نيز در نظر بگيريد. با بررسي نمونههاي موجود متوجه خواهيد شد که در اکثر وب سايتهاي مبتني بر پارالاکس، سايت تنها از يک صفحه طولاني تشکيل شده است و مشکل از همين جا شروع ميشود!
به علت تک صفحهاي بودن وب سايت و درنتيجه عدم امکان تعريف title، description و keywords هاي متعدد، سئو با مشکل روبهرو ميشود.
قرار دادن تمام حجم اطلاعات و تصاوير تنها در يک صفحه، باعث افزايش زمان لود وب سايت ميشود و در نتيجه امکان بستن سايت به وسيله کاربر قبل از لود کامل آن افزايش پيدا ميکند.
وب سايتهاي پارالاکس با طراحي واکنشگرا (Responsive) سازگاري ندارند.
در اين روش پيوند صفحات داخلي (Internal page linking) در وب سايت وجود ندارد.
در طراحي پارالاکس از Html، Css و Jquery استفاده ميشود و آشنايي با اين سه زبان براي شما الزامي است