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

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



  آیا می دانید تا کنون 6339 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

افکت حرکت پس‌زمینه هنگام اسکرول کردن صفحه تنها با CSS

10 6155 ۹ مرداد ۹۳

به نام خدا

با سلام خدمت همه‌ی دوستان و همراهان سون‌لرنی. طاعات و عباداتتون مقبول درگاه حق و عید فطر رو بهتون تبریک میگم با اینکه یکی دو روز ازش گذشته. امروز میخواهیم با یک ترفند بسیار ساده CSS یک افکت زیبا رو خلق کنیم. ابتدا دمو رو ببینید.


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

HTML:

CSS:

تا اینجا کدهای پایه بود. و حالا پیاده سازی افکت با سی اس اس:

مهم ترین خطوط، خطوط 5 تا 7 هست. در خط 5 مقدار backgrouns-size رو برابر cover قرار دادیم تا تصویر بکگراند کاملا تمام المنت رو در بر بگیره و کوچک تر از المنت والدش نباشه. و سپس در آخر مقدار background-attachment رو برابر fixed قرار دادیم. با این کار تصویر بکگراند ما حالت position: fixed میگیره. در این صورت هیچگاه از مکان خود حرکت نمیکند و ما با اسکرول کردن در صفحه، میتوانیم قسمت های مختلف این تصویر بکگراند رو ببینیم.

نکته ای رو که باید هنگام استفاده از این افکت در نظر داشته باشید رو هم باید بگم. هم تصاویر و هم المنت باید HD باشه، یعنی عریض باشه و ارتفاعش کم باشه.

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

موفق باشید.

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

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

  • ‏‏
    سید علی(۹ مرداد ۱۳۹۳)

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

  • ‏‏
    خواننده همیشگی(۱۴ مرداد ۱۳۹۳)

    یادش بخیر یه زمانی 7learn جایی بود برای یادگیری، دنبال هر موضوعی که میگشتیم اولین جایی که میرفتیم 7learn بود
    ولی این روزا دیگه اونجوری نیست، از ده تا مطلبی که عنوانش بالای سایته، همشون یا vip هست یا دوره های ویژه؛ بین این ده تا فقط دو مطلب جزئی برای کاربران عادی وجود داره ….

  • ‏‏

    ینی اکر بگم عالیه بازم در حقش ظلم کردم
    ینی فوق العاده عالیه 😉

  • ‏‏

    تو ie درس کار نمی کنه
    می لرزه!
    برا ie هم راه حل دارین؟

  • ‏‏

    آقای امینی ، فوق العاده بود ممنون .

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

    خیلی خوب بود موفق باشید

  • ‏‏

    section:nth-of-type(2):{
    background-image:url()}
    در جواب به سوال خودم متوجه شدم از ویژگی nth-of-type استفاده کردین. 😉 😉 😯

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram