آموزش طراحی وب

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

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

parallax

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

سلام خدمت دوستان و همراهان مدرسه مجازی ایرانیان

در مقاله ی پارالاکس چیست راجع به پارالاکس صحبت کردیم و شمارو با تکنولوژی پارالاکس آشنا کردیم.

در مقاله ی آموزش جامع طراحی قالب پارالاکس در هفتمین شماره از ماهنامه طراحی وب نحوه ی ایجاد سایت های پارالاکسی با پلاگین skroll رو خدمتتون بصورت کامل آموزش دادم.

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

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

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

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

«« جهت دانلود پروژه کلیک کنید »»

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

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

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

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

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

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

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

 

موفق و پاینده باشید.

منتشر شده در هفتمین ماهنامه طراحی وب

تهیه شده توسط مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

  • عالی بود ولی معمولاً خودم برای طراحی بکگرانت از تصاویر کوچیک با استایل تکرار استفاده میکنم به خاطر سبک بودن یا یک تصویر بزرگ بهینه شده

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین