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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

افکت زیبای سقوط سربرگ با اسکرول کردن توسط CSS

6081 ۶ بهمن ۹۲

بنام یگانه هستی بخش

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

دمو

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

اگه تا همین جا پیش برید و صفحه رو رفرش کنید و بعد اسکرول کنید میبینید که سربرگ همچنان در اول صفحه قرار داره و قسمت متن به زیر اون میره!

خب برای اینکه مشکل رو حل کنیم به قسمت متنمون z-index:5 رو میدیم.یعنی میخوایم در لایه ای جلوتر از لایه ی سربرگ قرار بگیره.به کد زیر که مال قسمت متن هست، دقت کنید.

::توضیح مختصر:خب در خط 5 و 6 ما کاری کردیم که متنمون در فاصله ی 600 پیکسل از بالا قرار بگیره.و در خط 7 که مهم ترین قسمته هم مشخص کردیم که متن ما در لایه ای جلوتر از لایه ی سربرگ قرار بگیره تا وقتی اسکرول میکنیم این لایه بره روی سربرگ.

البته یه قسمت هم بالا تر از سربرگ داریم که برای اینکه همیشه در همون قسمت قرار بگیره باز هم از position: fixed استفاده کردیم.و چون به متن z-index:5 دادیم به اون قسمت z-index:6 دادیم که در لایه ای بالاتر از قسمت متن قرار بگیره و زیر متن نره.به خط های برجسته شده ی کد زیر توجه کنید.

به همین راحتی.در آخر هم دمو رو برای دانلود میذارم تا اگه خواستید همه ی کدهاشو ببینید.

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

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

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

  • ‏‏
    رضا ساطع بیدگلی(۶ بهمن ۱۳۹۲)

    وای چه قدر آموزش های سایت حرفه ای شدند 😯 😯 😯

  • ‏‏
    پارسا(۷ بهمن ۱۳۹۲)

    واقعا چقدر حرفه ای
    اصلا قند تو دلم کره شد 😐

  • ‏‏
    حسین محمدی(۷ بهمن ۱۳۹۲)

    خیلی ممنون آموزش خوبی بود…
    در واقع میشه گفت این آموزش یه نمونه ساده ای از پلاگین های پیمایش منطبق هستند…

    • ‏‏
      علی امینی(۸ بهمن ۱۳۹۲)

      پیمایش منطبق؟!!
      تا حالا نشنیده بودم!

      • ‏‏
        حسین محمدی(۸ بهمن ۱۳۹۲)

        بله این واژه یه جور فارسی شده ی parallax scrolling هستش و از پلاگین های پرطرفدار جی کوئریه..

        • ‏‏
          علی امینی(۸ بهمن ۱۳۹۲)

          آهان.
          parallax scrolling شنیده بودم ولی پیمایش منطبق نه 😀

  • ‏‏

    دمت گرم عالی بود الان هم اکثر سایت ها اینجوری شدنند خیلی دنبال این اموزش می گشتم 😛

  • ‏‏
    رضا ساطع بیدگلی(۸ بهمن ۱۳۹۲)

    ببخشید یه سوال میشه به جای تصویر اسلاید شو هم قرار داد ؟؟

  • ‏‏

    سلام
    عنوان این مطلب رو سرچ کنید سایت nfliri.ir رو گوگل واسه من نتیجه اول میاره در صورتی که مطلب با rss از سون لرن کپی شده مثل اینکه زودتر از مطلب خودتون ایندکس شده به نرم به اسپم گوگل معرفیش کنید…

    • ‏‏
      علی امینی(۱۰ بهمن ۱۳۹۲)

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

  • ‏‏

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram