Back to Top


1395/10/19 - 19:52

آموزش استفاده از پارالاکس اسکرول - Parallax Scrolling

در این مقاله با هم مرور می کنیم چطور با استفاده از CSS به یک دایو افکت پارالاکس اسکرول بدهیم. (Parallax Scroll effect)

کلمات کلیدی

پارالاکسparallaxeffectscroll

آموزش استفاده از پارالاکس اسکرول - Parallax Scrolling

پارالاکس

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

چگونه افکت پارالاکس اسکرول را روی یک دایو 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>