پارالاکس

پارالاکس اسکرول گرایشی از وب است که در آن محتوای پس زمینه (یعنی تصویر) در زمان اسکرول با سرعتی متفاوت از محتوی پیش زمینه حرکت می کند. در مثال های زیر می توانید تفاوت بین ۲ صفحه ی وب که از این دو قابلیت استفاده کرده و نکرده اند را مشاهده کنید.
صفحه ی وب با استفاده از پارالاکس
صفحه ی وب بدون استفاده از پارالاکس

چگونه افکت پارالاکس اسکرول را روی یک دایو div اعمال کنیم؟

برای این کار از یک عنصر container استفاده می کنیم و یک تصویر پس زمینه با ارتفاعی مشخص به آن نسبت می دهیم. سپس از خصیصه background-attachment:fixed برای ایجاد یک افکت پارالاکس حقیقی استفاده می کنیم. سایر خصیصه های پس زمینه برای اعمال وضعیت مقیاس و موقعیت مرکزی تصویر استفاده می شوند:

<style>
    .parallax {
        /* The image used */
        background-image: url("img_parallax.jpg");

        /* Set a specific height */
        height: 500px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<!-- Container element -->
<div class="parallax"></div>

نکته: پارالاکس اسکرول همیشه روی تلفن های هوشمند کار نمی کند. لذا می توانیم از خصیصه مدیا media برای خاموش کردن اثر آن روی دستگاه های موبایل استفاده کنیم:

<style>
    @media only screen and (max-device-width: 1024px) {
        .parallax {
            background-attachment: scroll;
        }
    }
</style>