دانلود افزونه نمایش تصاویر به صورت پارالاکس در مطالب وردپرس نسخه ۲٫۱

امروز جمعه , ۱۹ آذر , ۱۳۹۵ شما در چهارده هستید.

برای سفارش پروژه جدید اینجا کلیک کنید.

محل تبلیغات شما محل تبلیغات شما
فروشگاه قالب چهاردهآرشیو فروشگاه
فروش قالب وردپرس سرگرمی و تفریحی پازل

فروش قالب وردپرس شماره 2900

فروش قالب وردپرس سرگرمی و تفریحی پازل

قیمت : 35 هزار تومان

امکانات قالب : واکنش گرا ، ولید شده و پنل مدیریت

اغلب وب مستر ها دوست دارند سایتی زیبا و جذاب داشته باشند. زیبا بودن یک سایت میتواند به افزایش بازدید و مدت زمان دوام کاربران در آن کمک زیادی بکند. یک سایت خوب علاوه بر داشتن محتوایی عالی و کاربرپسند باید شکل و شمایلی کاربرپسند نیز داشته باشد. یکی از روش های خوب و پرطرفدار برای افزایش جذابیت سایت, استفاده از افکت های انیمیشنی است.

parallax-thum

دانلود افزونه نمایش تصاویر به صورت پارالاکس در مطالب وردپرس نسخه ۲٫۱

به ویژه در ایران استفاده از انیمیشن در وب طرفداران بسیار زیادی دارد. جدا از بحث مضر بودن استفاده از انیمیشن های زیاد در وب, بد نیست کمی سخت گیری های بیش از حد را کنار بگذاریم. یک زمانی, طراحان وب دوست داشتند هرچه دم دستشان است و با آن حال میکنند را در سایت قرار دهند و یک سایت پرزرق و برق درست کنند. بعد از مدتی, این طرز تفکر کنار رفت و گفتند هرچه ساده تر بهتر و هرچقدر محتوا بیشتر معلوم باشد بهتر است! این عقیده تا جایی پیش رفت که بعضی ها, یک صفحه با پس زمینه خاکستری درست میکردند و فقط کمی متن با رنگ سیاه داخلش میگذاشتند و مردم هم به به و چه چه میکردند که عجب طرح مدرنی!!

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

اگر بخواهید به صورت حرفه ای از افکت های پارالاکس استفاده کنید باید چیز هایی از کدنویسی وب بدانید. اما اگر وردپرسی هستید و میخواهید در یک نوشته, تصاویری را به صورت پارالاکس نمایش دهید میتوانید از افزونه Image Parallax استفاده کنید. این افزونه به شما این امکان را میدهد که در مطالبتان تعدادی تصویر روی هم قرار دهید که با حرکت موس, تصاویر در جهات مختلف روی هم سُر بخورند.

نمایش تصاویر به صورت پارالاکس در وردپرس

برای انجام اینکار ابتدا باید افزونه Image Parallax را نصب و فعال کنید. سپس نیاز به دو (یا تعداد دلخواه) تصویر دارید تا آن ها را به شکل پارالاکس نمایش دهید. من یک تصویر انتخاب کردم و قسمتی از آن را بریدم. سپس قسمت بریده شده را به صورت جداگانه ذخیره کردم تا درنهایت دو تصویر داشته باشم که روی هم سر میخورند. به تصاویر زیر توجه کنید:

parallax

همانطور که در تصویر بالا مشاهده میکنید, تصویر اصلی اولین تصویر است. دو تصویر بعدی حاصل برش تصویر اصلی میباشد. اینکار را میتوانید با فتوشاپ انجام دهید.

توجه: انجام اینکارها الزامی نیست و شما میتوانید دو تصویر دلخواه را با سلیقه خودتان انتخاب کنید و به صورت پارالاکس نمایش دهید. اما من برای اینکه نتیجه جذاب تری ایجاد شود این کار را کردم. درواقع وقتی کاربر صفحه را باز میکند همان تصویر اصلی (اولین تصویر) را میبیند. اما با حرکت دادن موس, دونده ها به جلو و عقب حرکت میکنند.

پس از اینکه تصاویر مورد نظرتان را آماده کردید, وقت آن است که آن ها را به صورت پارالاکس در یک مطلب نمایش دهیم. برای اینکار به بخش افزودن نوشته وردپرس بروید. روی بخشی از مطلب که میخواهید تصاویر پارالاکس را نمایش دهید یک کلیک کنید. سپس روی گزینه “افزودن پرونده چند رسانه ای” کلیک کنید. در کادر باز شده, از سمت راست روی گزینه Create Parallax کلیک کنید.

parallax2

در مرحله بعد به بخش “بارگذاری پرونده ها” بروید و روی دکمه “گزینش پرونده ها” کلیک کنید. حال تصاویری که قصد دارید به صورت پارالاکس نمایش دهید را انتخاب و آپلود کنید. سپس روی Creat a new parallax کلیک کنید.

parallax3

در مرحله ی بعد باید ترتیب قرار گیری لایه ها روی هم را مشخص کنید. بدین منظور تصاویر را به ترتیب دلخواه روی هم دراگ کنید. به این صورت که تصویری که میخواهید روی تصویر دیگر قرار گیرد را پایینتر بگذارید.

parallax4

حال نوبت به تنظیمات افکت پارالاکس میرسد. در بخش چپ, تنظیمات مربوط به افکت را میبینید. یک به یک بخش ها را در زیر توضیح میدهیم:

Calibrate: این بخش تنظیمات مربوط به قرارگیری اولیه تصاویر است. پیشنهاد میشود تغییری داده نشود.

Invert: در این بخش میتوانید تعیین کنید که تصویر رویی در چه جهتی حرکت کند. در جهت حرکت موس یا خلاف جهت آن. درصورتی که تیک گزینه X axis زده شده باشد, تصویر در راستای محور X (افقی) خلاف جهت حرکت موس, حرکت میکند. اگر این تیک زده شده نباشد, تصویر در راستای محور X در جهت حرکت موس حرکت میکند. گزینه Y axis هم به همین شکل است فقط با این تفاوت که راستای حرکت آن محور Y (عمودی) است.

Limit: در این بخش میتوانید برای حرکت تصویر رویی, محدودیت تعیین کنید. مقدار باید برحسب پیکسل باشد.

Scalar: در این قسمت میتوانید میزان حساسیت را تعیین نمایید. هرچه اعداد بزرگتری بگذارید حساسیت حرکت تصویر بیشتر میشود و با حرکت موس, سریعتر جابجا میشود.

Friction: این قسمت, مربوط به تنظیمات اصطکاک تصویر است. هرچه مقدار بیشتری بگذارید تصویر سخت تر حرکت میکند. به عبارت دیگر, بلافاصله بعد از حرکت موس, حرکت تصویر نیز متوقف میشود. در حالت پیشفرض, بعد از توقف موس, تصویر مقداری حرکتش را ادامه میدهد.

در نهایت روی دکمه Insert Parallax کلیک کنید. با انتشار نوشته, میتوانید تصویر پارالاکسی را در مطلبتان مشاهده کنید.

تصویر زیر تنظیمات افکت پارالاکسی که من انجام دادم است.

parallax5

امیدوارم این آموزش مفید بوده باشد. شاد و پیروز باشید.

به کانال تلگرام چهارده بپیوندید !

پسورد فايل :www.4dah.ir

پیش نمایش آفلاین

فرمت : zip

حجم : 592 کیلوبایت

منبع : چهارده

مشکلی دارید؟
جواب خود را در پست فروم پیگیری کنید

با عضویت در خبرنامه چهارده همیشه بروز باشید.

ایمیل خود را بدون www وارد کنید!

اشترک در گوگل اشترک در گوگل پلاس اشترک در استامبل آپن دیگ اشترک در کلوب اشترک در فیس نما اشترک در تویتر اشترک در فیسبوک

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

مشاهده تمامی 271 پست

به نکات زیر توجه کنید

  • جهت تغییر عکس آواتار اینجا کلیک کنید.
  • نظرات شما پس از بررسی و تایید نمایش داده می شود.
  • لطفا نظرات خود را فقط در مورد مطلب بالا ارسال کنید.

Code Center