پارالکس در سی اس اس

ایجاد افکت پارالکس در CSS

افکت پاراکس در صفحات وب محبوبیت خاصی دارد به همین دلیل در این ویدیو نحوه ایجاد این افکت را در سی‌اس‌اس بررسی می‌کنیم.

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

نکته مهم اینکه در فایرفاکس باید sectionها:
1. فرزند مستقیم viewport باشند
2. و باید transform-style: preserve-3d را داشته باشند

بیشتر بخوانید

9 دیدگاه برای “ایجاد افکت پارالکس در CSS

  1. .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted red;
    }

    .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    }

    .tooltip:hover .tooltiptext {
    visibility: visible;
    }

    Move the mouse over the text below:

    Hover over me
    Tooltip text

    Note that the position of the tooltip text isn’t very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.

    سلام. ببخشید من تو کدهای اینجوری متوجه نمیشم چرا .tooltip .tooltiptext مینویسن مگه تول تیپ اون بالا استایل دهی نشد پس چرا دوباره اونم اینجوری مینویسن یا شاید معنی دیگه ای داره(من فکر میکنم .tooltip .tooltiptext یعنی هردوشون یه کلاس استفاده میکنن درسته؟) و اصلا کجای کد مشخص میشه چه زمانی از کدوم کلاس استفاده شه.
    پیشاپیش از پاسخگوییتون ممنونم.

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

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *