اطلاعات مطلب

نویسنده : Mehrdad Mohammadi
تاریخ ارسال : 19 ژوئن 2015 در 3:29 ب.ظ
تعداد دیدگاه : بدون ديدگاه
دسته بندی
آمار بازدید
  • 6,318
  • 12,446
  • 1,036,557
  • 725
  • 100
  • 243
  • 94
  • 0
  • آوریل 3, 2017
دکووب را دنبال کنید

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

ایجاد پس زمینه های پارالاکسیReviewed by مهرداد محمدی on Jun 19Rating:
[تعداد: 0    میانگین: 0/5]

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 که مقدارش به خودتون بستگی داره. هرچقدر که مقدار این صفت بیشتر باشه تصویر کشیده تر میشه و با سرعت کمتر حرکت میکنه و هرچقدر که این عدد کمتر باشه تصویر فشرده تر و کوچکتر میشه و با سرعت بیشتری با اسکرول صفحه حرکت میکنه.

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

نظر خود را به اشتراک بگذارید