ساخت Background و Header برای سایت با تکنولوژی Parallax

درود دوستان عزیز

دیشب یک افزونه در google webstore دیدم که خیلی جالب بود. شاید بیشتر کاربران انجمن با این سایت آشنا باشند اما بهتر دیدم برای اون دسته از دوستان که اطلاع ندارن این سرویس رایگان رو معرفی کنم.

ساخت بکراند پارالکس Parallax ! این سایت یک سرویس آنلاین هست که با اون میشه برای هر سایتی یک هدر یا بکراند پارالکس ایجاد کرد و کار کردن با اون بسیار راحته. کافیه چند تا عکس آپلود کنید و با خوندن راهنمای سایت چند تا کلیک ساده و . . . به راحتی کد مورد نیاز رو دریافت کنید.

Parallax Background Builder

این دقیقا مشابه اسلایدر معروف سایت unite revolution slider هست که در دموی اون و در بخش parallax میشه نمونه این تکنولوژی نوین وب رو مشاهده نمود.

در طراحی وب، به سبکی که در اون با اسکرول کردن یا تکان دادن پوینتر موس، اتفاقات خاصی مثل تکون خوردن اشیاء ، تغییر زاویه دید ، حرکت اشیاء یا پس زمینه در خلاف یا موافق اسکرول با سرعت های مختلف، یا افکت های این چنینی رخ میده هم پارالکس گفته میشه. اینگونه قالب ها برای جوملا هم طراحی شدند و بیشتر اونها از طراحی فلت و تک صفحه ای ( onepage ) بهره مند هستند.

تنها نقطه ضعف این گونه سایتها سنگین بودن اونهاست که برای اینترنتهای کم سرعت اصلا مناسب نیستند. اما چنانچه در طراحی این تکنیک اعتدال رعایت بشه نتایج خوبی بدست خواهد اومد.

مثلا سایت آسیاتک در بعضی از صفحاتش از این تکنولوژی استفادده کرده.

تعریف پارالکس :

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

پارالاکس (Parallax) در لغت به معنای اختلاف منظر است ولی در طراحی وب به معنی تکنیک*های پیمایش در صفحه برای عمق بخشی به وب سایت است.تکنیک پارالاکس بر پایه استفاده از کدهای HTML5 و CSS3 و Jquery است و از میان شیوه*های طراحی وب، به جرئت می توان گفت پارالاکس (Parallax) یکی از قدرتمندترین و شگفت*انگیزترین شیوه های طراحی است و در یک سال اخیر نمونه*های متعددی از این طراحی را دیده*ایم.

طراحی پارالاکس برای ساختن یک وب سایت مناسبتی، تبلیغات یا معرفی یک محصول، وب سایت یک رویداد و … مناسب و صد البته برای ایجاد یک سایت خبری یا یک سایت شخصی که کاربر باید هر روز به آن مراجعه کند کاملا نامناسب است؛ به عبارتی کاربر از اینکه گاه غافلگیر شود و با اسکرول کردن، فرایندهای متفاوتی را ببینید، لذت می برد اما اگر هر روز مجبور به این کار باشد، مسلما خواهد رنجید!

سایت*های زیادی با طراحی پارالاکس طراحی شده*اند که در طراحی برخی از آن ها هوشمندی خاصی دیده می*شود! در گونه موفق این سایت ها، طراح به خوبی از آن برای تحت تأثیر قراردادن و بیان مفهومی یک محصول، کارهای یک شرکت، فرایند یا مقصود خود استفاده کرده است.

دو نمونه از سایتهای Parallax خارجی :

TEDxGUC

Soleil Noir 2012 | We believe in...

نمونه های بیشتری برای معرفی هست ولی بسیار سنگین هستند و برای لود بعضی از اونها باید حدود یک دقیقه منتظر باشید تا بطور کامل لود شوند. البته با سرعت 3 مگابایتی من !

برگرفته از سایت zdnet دات آی آر