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

- visibility ۱۰ mode_comment

به نام خدا

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

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

HTML:

CSS:

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

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

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

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

موفق باشید.

comment دیدگاه کاربران
سید علی

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

behnam hs

Jaleb bud 🙂

خواننده همیشگی

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

لقمان آوند

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

مرتضی

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

سعید

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

وحید صالحی

خودتون دیگه باید بشنید و سازگارش کنید

Khazra

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

پریسا

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

فاطمه

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

نیاز به لاگین

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