آموزش ساده واکنش گرا کردن تصاویر با ResponsifyJs

تبلیغات
کانال تلگرام فتولیا

طراحی وب مدرن ۱۰۰% باید ریسپانسیو یا همان واکنش گرا باشد و کتابخانه های زیادی به طور روز افزون انجام این کار را برای ما آسان می کنند.

با پلاگین های رایگانی مثل  ResponsifyJS امکان اینکه ما صفحات سایت خود را با همه دیوایس خا هماهنگ کنیم خیلی ساده تر میسر می شود. این پلاگین اول نگهدارنده(Container) عکس ها را می گیرد و سپس به طور اتوماتیک آنها را با توجه به سایز صفحه مرتب می کند.

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

پلاگین  ResponsifyJS دقیقا این مشکل را حل کرده است.این پلاگین می تواند به صورت اتوماتیک کار کند و برای دقیق تر شدن می توانید منطقه فوکوس را به آن بدهید تا آن منطقه همیشه دیده شود.

این مناطق فوکوس به صورت اعداد اعشاری (از ۰ تا ۱) باید داده شوند مثلا .۵ معادل ۵۰% است(یا چپ/راست یا بالا/پایین) .شاید مشخص کردن دستی این اعداد کمی سخت باشد ولی خوشبختانه یک نرم افزار ساده برای محاسبه این اعداد وجود دارد که می توانید موقعیت ها را در آن حساب کنید.

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

در همین رابطه :   منوی پایین افتادنی جی کوئری با امکان تغیر ظاهر و سفارشی سازی به سادگی

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

منبع

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in jQuery
گلچین اسکریپت هایی برای تغییر شکل Radio و Checkbox در HTML

عناصر HTML مثل Checkbox و Radio به خودی خود مطمئنا خیلی زیبا نیستند ! و در طراحی وب هم هم...

Close