ایجاد پس زمینه های پارالاکسی |

ایجاد پس زمینه های پارالاکسی

parallax

ایجاد background های پارالاکسی

سلام خدمت دوستان و همراهان سئو ورک

اما ممکنه نحوه ی پیاده سازی سایت های کاملا پارالاکسی براتون سخت و دشوار باشه و تمایل داشته باشید بخش کوچکی از سایتتون مثل Background هارو بصورت پارالاکس پیاده کنید تا جذابیت بیشتری به سایتتون بده و اون رو از سادگی دربیاره.

در این مقاله نحوه ی ایجاد پس زمینه های پارالاکسی رو با یک پلاگین ساده بهتون آموزش میدم.

خوب این کار بسیار بسیار سادست فقط کافیه پلاگین مربوطه رو دانلود و در پروژه تون اضافه کنید.

لطفا دموی این پروژه رو دانلود کنید و نتیجه رو ملاحظه کنید تا نحوه ی استفاده از این پلاگین رو که شاید چند خط هم نشه بهتون آموزش بدم.

حالا پروژه رو دانلود کنید و پوشه رو از حالت فشرده خارج و فایل هارو مشاهده کنید.

از بین تمامی فایل ها تنها چیزی که شما نیاز دارید که همیشه در پروژه تون استفاده کنید فایل plugin.js هست که باید به صفحه تون اضافه کنید تا صفات تعریف شده رو شناسایی کنه و قابلیت پارالاکس رو روی پس زمینه های صفحه اعمال کنه.

با استفاده از آموزش ایجاد صفحات one page ، میتونید نحوه ی ایجاد سایت های One Page یا Single Page رو آموزش ببینید و بعد هر استایلی که خواستید به صفحه تون بدید.

بعد از اینکه سایتتون رو طراحی و پیاده سازی کردید فقط کافیه با دو attribute پس زمینه های صفحه تون رو پارالاکسی کنید.

همونطور که در فایل دانلود شده ملاحظه می کنید کافیه از صفات زیر استفاده کنید و به هر لایه که براش پس زمینه تعریف کردید این صفات رو اختصاص بدید:

<section id="home" data-type="background" data-speed="10">                            
 
</section>   
      
<section id="about" data-type="background" data-speed="10">
 
</section>

 

صفت data-type با مقدار background و صفت data-speed که مقدارش به خودتون بستگی داره. هرچقدر که مقدار این صفت بیشتر باشه تصویر کشیده تر میشه و با سرعت کمتر حرکت میکنه و هرچقدر که این عدد کمتر باشه تصویر فشرده تر و کوچکتر میشه و با سرعت بیشتری با اسکرول صفحه حرکت میکنه.

خوب دوستان امیدوارم که معرفی این پلاگین بتونه بهتون تو طراحی های پارالاکسی کمک کنه.

پیام بگذارید

طراحی و پیاده سازی توسط دکو وب