آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

پارالاکس چیست؟

paralax

پارالاکس چیست؟

پارالاکس یک تکنولوژی جدید در زمینه وب هست که اخیرا در وب ایران هم رواج پیدا کرده . در این سایت ها که معمولا تک صفحه ای یا single page هستند ، با اسکرول صفحه و یا حرکت موس یک افکت توی صفحه و روی عناصر صفحه اتفاق میوفته. مثلا پس زمینه blur و یا جابجا میشه ، تصاویر و نوشته ها حرکت می کنند ، بعضی از عناصر و المنت ها با افکت توی صفحه ظاهر می شوند و … . دقت داشته باشید که هر افکتی که با اسکرول و یا حرکت موس اجرا میشه با برگشت موس و یا برگشت اسکرول افکت هم به همون حالت که اتفاق افتاده به حالت قبل برمیگرده و عنصر در حالت اولیه خودش قرار میگیره.

افکت دیگه ای که ممکنه توی پارالاکس پیاده بشه این هست که شما با حرکت موس از سمت راست صفحه به سمت چپ (یا بالعکس) میتونید میدان دیدتون رو گسترش بدید و از عرضی که در مانیتور مشاهده میکنید فراتر برید و به عبارتی منظره رو بصورت ۱۸۰ درجه ببینید، به نحوی که عناصر و اجزای صفحه سر جای خودشون قرار دارن و شما میتونید عرض صفحه رو از سمت راست به چپ و از سمت چپ به راست و فراتر از عرض ثابت صفحه مشاهده کنید.

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

یا مثلا مانیتور شما ۱۰۲۴ پیکسل هست و عرض صفحه وبتون ۱۳۶۶ پیکسل طراحی شده ، اما شما تصویر صفحه وبتون رو از مرکز تصویر به اندازه ی همون ۱۰۲۴ پیکسل میبینید ، حالا اگر پارالاکس رو به اینصورت تو صفحه اجرا کنید ، شما می تونید با کشیدن موس از سمت چپ و راست ، گوشه ی سمت راست و چپ اضافی صفحه تون رو که پنهان بود طی کنید و ببینید.

پارالاکس

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

پارالاکس

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

 

چگونه یک سایت پارالاکس طراحی کنیم؟

طراح گرافیک سایت های پارالاکس باید تا حدودی با سایت های پارالاکسی آشنا باشه تا بتونه بصورت استاندارد پروژه رو طراحی کنه و برنامه نویس هم بتونه اون طرح رو با تکنولوژی پارالاکس به درستی پیاده کنه.

برای پیاده سازی این تکنولوژی چندین پلاگین وجود داره مثل parallax.js که شما میتونید استفاده کنید. در نسخه ی هفتم ماهنامه یک پروژه ی پارالاکس رو باهم قدم به قدم انجام میدیم و یک وب سایت single page پارالاکسی ایجاد میکنیم.

نحوه ی پیاده سازی پارالاکس رو در هفتمین ماهنامه طراحی وب بطور کامل آموزش دادم.

 

امیدوارم که این مقاله براتون مفید بوده باشه.

تهیه شده در مدرسه مجازی ایرانیان

منتشر شده در ششمین ماهنامه طراحی وب

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • کیارش

    با سلام خسته نباشید
    شماره اول ماهانه طراحی وب دانلود کردیم آدرس فایل ها که برای دانلود گذاشتید لینک ها خرابه
    مثلاً : آموزش پارالاکس قسمت اول گیر کردیم چون آدرس لینک ها خرابه.
    رسیدگی کنید ممنون.
    (منتظر جواب شما هستیم)

    • حسین همت یار

      سلام ، بله لینک ها مربوط به گذشته هست و مطالبش در سایت قرار گرفته که میتونید جستجو کنید و مطالعه کنید . تشکر

  • طراحی سایت

    بسیار از مطالب خوبتون ممنونم : )

  • Nazionalist

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

  • طراحی وب سایت در زنجان

    عالی بود – مقالاتی که می نویسید همیشه عالیه – دستتون درد نکنه

  • مرسی ممنونم بابت تمامی مطالب مفیدی که میذارید.

  • طراحی سایت

    سلام و ممنون از مطلب مفید و خوبتون

  • آموزش های طراحی سایت

    سلام. توضیحات خوب بود اما لطفا آموزش ایجاد این افکت رو قرار بدید. باتشکر

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟