illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

headroom : مخفی کردن هدر زمانی که به آن نیازی نیست!

6 1263 ۳۰ اردیبهشت ۹۴

در این مطلب میخوام یک ابزار زیبا بنام headroom رو خدمت شما معرفی کنم و اونو آموزش بدم.

headroom

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

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به headroom.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

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

میبینید که یک div با class = header قرار دادم و درون اون یک منو با 5 آیتم گذاشتم. استایلی برای اون در نظر میگیرم :

تا اینجا شکل کلی رو به منو دادیم. کلاس header--fixed رو هم برای div در نظر گرفتیم. این کلاس برای اینه که هدر رو در بالای سایت ثابت قرار بدیم. برای اینکار کد CSS زیر رو براش قرار میدم :

خب حالا باید در تگ اسکریپت نهایی کد زیر رو قرار بدین و div رو درون یک متغیر بزارین :

در مرحله بعدی باید یک نمونه از Headroom بسازید و درون یک متغیر بزارین :

میبینید که به عنوان پارامتر اول همون هدر رو قرار دادم و بعد از اون یک {} گذاشتم که میتونیم ویژگی های مورد نظرمون رو در اینجا قرار بدیم. من از ویژگی های زیر استفاده میکنم :

میبینید که یک ویژگی بنام classes قرار داده شده و با استفاده از این ویژگی میتونین مشخص کنید در هر زمانی هدر ما چه کلاسی بهش نسبت داده بشه.

  • initial : یعنی در ابتدا کلاس animated به هدر افزوده بشه و بر اون اعمال بشه. شما با استفاده از این نام کلاس ها میتونین با استفاده از کدهای CSS در حالات مختلف روی هدرتون مدیریت داشته باشین.
  • pinned : زمانی که به سمت بالا اسکرول بشه این کلاس به هدر افزوده میشه
  • unpinned : زمانی که به سمت پایین اسکرول بشه این کلاس slideUp به هدر افزوده میشه

حالا میتونین با استفاده از کدهای CSS برای حالات مختلف کد مورد نظر و افکتتون رو قرار بدین. در ابتدا برای کلاس animated کدهای زیر رو قرار میدم :

حالا برای slideDown :

برای SlideUp :

خب حالا باید کد زیر رو به کدهای دیگه Javascript اضافه کنید تا هدرتون کارش تموم بشه :

ویژگی های دیگه ای مانند Tolerance و offset وجو داره که میتونین مشخص کنید بعد از چقد اسکرول شدن این افکتها اعمال بشه. میتونین نمونه های بیشتری رو در اینجا ببینید.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    افشین زندی(۳۰ اردیبهشت ۱۳۹۴)

    عالی بود.ممنون

  • ‏‏
    پوریا زارعی(۳۱ اردیبهشت ۱۳۹۴)

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

    • ‏‏
      محمد اسفندیاری(۳۱ اردیبهشت ۱۳۹۴)

      توی بیشتر سایتا مثل linkedin پیاده سازی شده
      ببینید وقتی شما به سمت پایین اسکرول میکنید دیگه قاعدتا با منو کار ندارید ، دارید؟
      میخواید متن رو بخونید و هدر براتون مهم نیس ، بهمین دلیل وقتی بسمت پایین اسکرول بشه مخفی میشه و یه مقدار کم که به بالا اسکرول کنید ، دوباره ظاهر میشه
      فرض کنید یه صفحه بلند باشه اگر این کارو نکنید ، باید خیلی اسکرول کنید تا به منو برسید ولی با اینکار منو همیشه در دسترسه
      موفق باشید

      • ‏‏
        پوریا زارعی(۳۱ اردیبهشت ۱۳۹۴)

        اوکی متوجه شدم
        یعنی به محض اینکه یه خورده بالا بکشیم منو ظاهر میشه ؟
        توی دمو ارتفاع صفحه کمه کامل مشخص نیست

        • ‏‏
          محمد اسفندیاری(۱ خرداد ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram