۱۵ افزونه Hover Effects رایگان جی کوئری

مطمئنا گالری عکس های شگفت انگیز با انیمیشن های خنده دار و جلوه های زیاد در وب سایت های محبوبی مانند اپل را دیده اید و از خود پرسیده اید که چگونه آن ها را ایجاد می دهند؟ ساده ترین پاسخ به این سؤال، افزونه های جی کوئری Hover Effects است. افزونه های جلوه های جی کوئری به شما امکان می دهد برای هر قسمت از وبلاگ های خود جلوه های شگفت انگیز شناوری ایجاد کنید. در این مقاله ۵ افزونه Hover Effects رایگان جی کوئری را معرفی می کنیم.

نویسنده سید علی اندرزگو

۱۵ افزونه Hover Effects رایگان جی کوئری

مطمئنا گالری عکس های شگفت انگیز با انیمیشن های خنده دار و جلوه های زیاد در وب سایت های محبوبی مانند اپل را دیده اید و از خود پرسیده اید که چگونه آن ها را ایجاد می کنند؟ ساده ترین پاسخ به این سؤال، افزونه های جی کوئری Hover Effects است. افزونه های جلوه های جی کوئری به شما امکان می دهد برای هر قسمت از وبلاگ های خود جلوه های شگفت انگیز شناوری ایجاد کنید. در این مقاله ۵ افزونه Hover Effects رایگان جی کوئری را معرفی می کنیم.

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

jQuery محبوب ترین فریم ورک جاوا اسکریپت است و توسط شرکت هایی مانندGoogle Microsoft ،IBM و Netflix استفاده می شود. و دلیل آن این است که jQuery دیدگاههای وب را برای وبلاگها و وب سایتها فراهم می کند، همچنین امکان دستکاری آسان HTML DOM و CSS، انیمیشن های افکت و HTML را نیز فراهم می کند.

Swish jQuery Zoom Hover Effects Plugins

Swish jQuery Zoom Hover Effect Plugin این افزونه Hover Effect رایگان است و می توانید از آن به راحتی می توانید در وبلاگ ها و وب سایت های خود استفاده کنید، این اثر برای تصاویری کاربرد دارد که وقتی موس در اطراف آن حرکت می کند، اثر زوم (بزرگنمایی یا بزرگنمایی را در صورتی که تمایل دارید) اعمال می کند. همچنین این امکان را می دهد که یک پوشش روی قسمت بالای تصویر انتخاب شده که شامل یک نماد است که طبق خواسته طراح می تواند دستکاری شود. بزرگنمایی و نماد پوشاننده هنگامی که یکپارچه با هم جمع شوند عالی به نظر می رسد. این افزونه مانند عناصر نمونه کارها ، به عناصر وب سایت جلوه ای فوق العاده می دهد.

Demo | Download

Stack Motion Hover Effects

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

Demo | Download

Direction Reveal

Direction Reveal یکی دیگر از پلاگین های HQ Effect Hover Effect است. بیشترین کاربرد آن در گالری تصاویر بزرگ است. این Hover Effect حرکت موس را تجزیه و تحلیل کرده و مسیری را که در آن ماوس وارد شده و از یک عنصر بلوک خارج می شود تشخیص می دهد. هنگام پنهان کردن، محتوای پنهان از طریق انیمیشن در جهت ورود و خروج نشانگر ماوس آشکار می شود. همچنین دارای پشتیبانی لمسی داخلی است که در آن لمس اول محتوای پنهان را نشان می دهد و لمس دوم پیوند / تصویر را در بلوک باز می کند. در یک گالری بزرگ تماشای موس از یک تصویر به تصویر دیگر بسیار رضایت بخش است.

Demo | GitHub

jQuery Hover 3D Effect

این افزونه جی کوئری با استفاده از CSS3 برای ایجاد پارالاکس تعاملی مانند اثر hover روی عناصر بلوک و تصاویر پنهان شده. هر وقت ماوس روی تصویر خم شود ، در آن جهت کج می شود و به نظر می رسد که تصویر ظاهر می شود. وقتی ماوس به همان تصویر منتقل می شود ، به نظر می رسد که تصویر با دقت به نشانگر ماوس نگاه می کند. در واقع این ایده برای تبدیل شی به صورت به یک فضای ۳ بعدی ، دستکاری در ارزش translateZ و تشخیص حرکت ماوس در آن عنصر بلوک خاص برای تغییر مقدار تبدیل است. این اثر سه بعدی به تصاویر می دهد و از این رو توسط بسیاری از صفحات وب مدرن استفاده می شود.

Demo | Download

jQuery Slick Image Hover Effects

Slick Image Hover Effects یک افزونه jQuery است که به ایجاد جلوه های شناور متحرک و قابل تنظیم بر روی تصاویر انتخابی و عناصر بلوک کمک می کند. این پشتیبانی از رنگ پس زمینه ، اندازه و سفارشی و همچنین اجازه می دهد تا انیمیشن و کدورت سفارشی. هنگامی که ماوس روی آن معلق است ، تصویر توسط لایه ای شفاف با اطلاعات رسانه ای پوشانده می شود. در ضمن انجام این کار ، از انیمیشن های مختلفی پشتیبانی می کند که توسط کاربر می تواند یک اثر دلخواه ایجاد کند. علاوه بر این می توان تغییر اندازه تصویر اصلی را ایجاد کرد که اثر بزرگنمایی (هم در داخل و هم در خارج) ایجاد می کند. چنین افزونه ای که به راحتی قابل تنظیم است در بسیاری از وب سایت ها و وبلاگ ها قابل مشاهده است.

Demo | Download

Slickhover lightweight jQuery Plugin

افزونه Slickhover jQuery یک افزونه سبک است که با محو کردن تصویر آویز پوشش پس زمینه نرم و صاف ایجاد می کند. ادغام این افزونه بسیار آسان است، زیرا انجام این افزونه در انتخاب کننده تصویر کاری است که باید انجام شود. یک نماد سفارشی را هنگام تعطیل بودن نشان می دهد، بنابراین معمولاً زمانی از این افزونه استفاده می شود که یک عنصر بلوک دارای یک پیوند سفارشی باشد. این افزونه مانند پلاگین قبلی کاملاً قابل تنظیم است. رنگ پوشش پس زمینه، نماد سفارشی، انیمیشن انتقال، همه اینها مطابق میل طراح قابل تغییر است.

Demo and Download

jQuery Card Flip Hover Effect

jQuery Card Flip Hover Effect یک افزونه jQuery رایگان است که هنگام پنهان کردن روی عناصر بلوک، محتوای مخفی اضافی را نشان می دهد. این افزونه دارای کاربردی آسان است زیرا می توان آن را مستقیماً با استفاده از bower یا با استفاده از CDN ادغام کرد بدون اینکه مجبور به بارگیری چیزی باشید. آنها بیشتر در وب سایت ها به عنوان لیستی از کارمندان دیده می شوند که در آن عکس می چرخد تا اطلاعات را در مورد کارمندان هنگام پنهان کردن نشان دهد. به همین دلیل این Hover Effect را بیشتر در وب سایتهای سازمانی و شرکت مشاهده می شود.

Demo | Download

Thumbnail Zooming Image and Faded Caption

این افزونه بسیار شبیه به Slick Hover Effect است که قبلاً مورد بحث قرار گرفت. اما این افزونه به جای تصاویر بزرگ از تصاویر کوچک و معمولی استفاده می کند. این افزونه به جای یک تصویر کوچک اطلاعات بیشتری را در اختیار بینندگان قرار می دهد. هر وقت موس را به تصویر کوچک بکشید بدون اینکه در اندازه واقعی تصویر تغییری ایجاد شود کمی تغییر می کند و محتوای اضافی در بالای پوشش پس زمینه قرار می گیرد. این مورد بیشتر در لیست حامیان مالی یا مشتریانی در صفحه وب یک شرکت استفاده می شوند که جزئیات اسپانسرها یا مشتری ها تا در هر زمان که تصویر کوچک روی آنها می چرخد را نشان دهد.

Demo | Download

Tilt Hover Effects

در سال ۲۰۱۵ Kikk در شبکه ای از وب سایت خود ایجاد شده توسط Dogstudios از یک اثر شناور استفاده کرد. Tilt Hover Effect از این ایده الهام گرفته است. از زمانی که اثر شناور شیب به طور گسترده ای رایج شده است. این اثر شبیه به ۳D Hover Effect است که قبلاً ذکر شد. این یک اثر شیب اختلاف منظر را برای شناور برای هر تصویر ایجاد می کند ، اما با اضافه کردن یک روکش نیمه شفاف ، یک عنصر حاشیه و یک متن جسورانه به همراه یک عنصر “درخشش”. همچنین از همان مفهوم جلوه های ۳D hover استفاده می کند اما تفاوت در اینجاست که تصویر پس زمینه و متن ها ، مرزها و سایر مواد به جای فقط یک به دو صفحه متفاوت تبدیل می شوند. هواپیماها در زاویه های مختلف و در اعماق مختلف کج می شوند تا جلوه ای چند لایه افزایش یافته داشته باشند. آنها در پرتفوی و پوشش های شخصی چشمگیر به نظر می رسند.

Demo | GitHub

Snake Gallery Hover jQuery Plugin

Hover Effect گالری مارها دقیقاً از نام آن گرفته شده است. در یک گالری عکسی که بین تصاویر فاصله ایی نیست چشمگیر به نظر می رسد. هنگامی که تصاویر به طور مداوم یک به یک در معرض نور قرار می گیرند، پوشش پس زمینه مانند مار در حال خزیدن بر روی گالری تصاویر است از این رو این نام را بر روی آن نهاده اند. وقتی تصویر پنهان می شود، پوشش پس زمینه متحرک در یک حرکت آگاه از جهت تصویر اصلی ایجاد می شود و محتوای اضافی را فاش می کند. این افزونه همچنین حرکت موس را تجزیه و تحلیل کرده و حرکت ورودی و خروج را در عنصر بلوک تشخیص می دهد.

Demo | Download

Mouse Over Images Effect

این یکی از ساده ترین شکل های hover effects در لیست افزونه های رایگان جی کوئری است. در یک گالری تصاویر در مجموعه ایی شبکه مانند نمایش داده می شوند، این افکت شناور تصویر را بزرگ‌تر می‌کند، و با مهربانی به محل اصلی خود باز می گردد. گرچه ممکن است ساده به نظر برسد اما زمانی که دائما متوقف است، ضربان قلب ایجاد می‌کند که کاملا شگفت‌انگیز به نظر می‌رسد.

Demo and Download

Image Zoom Effect on Hover

این افزونه Hover Effect در سایت های تجارت الکترونیکی که در آن تصویر محصول در بخشی که ماوس روی آن معلق می رود بزرگ می شود بسیار محبوب است. مکان نما در نماد ‘+ تغییر می کند و قسمت خاصی از تصویر را در جایی که مکان نما نشان می دهد بزرگ می کند. کاربر همچنین می تواند بر حسب تقاضای خود ، نقاط زوم را تغییر داده و تصویر را بزرگ یا کوچک کند. نمای بزرگ شده در یک عنصر بلوک جداگانه نمایش داده می شود. بیشتر سایتهای خرید آنلاین از این ویژگی استفاده می کنند تا به کاربران نمای کاملی درباره محصول مورد نظر برای خرید ارائه دهند.

Demo and Code

Lens Effect Image Zooming

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

Demo | Download

Flip Content 3D Animation jQuery Plugin

این افزونه با سایر افزونه هایی که قبلاً در مورد آن ها صحبت کردیم متفاوت است. این افزونه به جای معلق بودن بر روی عنصر بلاک مورد نظر می چرخد. این انیمیشن با یک عمل کلیک شروع می شود. تلنگر هنگام شروع ، عناصر بلوک برای آشکار کردن محتوای مخفی تلنگر می زنند. با یک کلیک دیگر، می توانید تلنگر را لغو کنید. این انیمیشن با یک عمل کلیک ایجاد می‌شود، وقتی که تحریک شد عناصر بلوک برای آشکار کردن محتوای پنهان تغییر می‌کنند. این فلیپ فلاپ توسط یک عمل کلیک دیگر برگردانده می‌شود. در این افزونه دو رویداد وجود دارد: Flip: done که با تکمیل تلنگر آغاز می شود و Flip: change که با به پایان رساندن تلنگر به روزرسانی تنظیمات یک عنصر آغاز می شود. این امر محتوای مشابهی را شبیه به اثر ورق ورق (hover)flips می‌کند.

Demo and CodeDownload

Image Scroll On Hover

این مورد یک hover effect چشمگیر است که به زیبایی روی تصاویر طولانی کار می کند که امکان تغییر اندازه در تصویر کوچک را ندارند. اگر اندازه تصویر بزرگ باشد، این افزونه به طور خودکار تصویر را اندازه می کند. این کار با پیچاندن تصاویر مورد نظر در یک ظرف با سایز ثابت انجام می شود. در ابتدا فقط بخشی از تصویر اصلی نمایش داده می شود و وقتی روی آن بکشید، تصویر پیمایش می شود تا محتوای کامل آن را نشان دهد. سرعت پیمایش قابل تنظیم است و طراح می تواند بنا به نیاز خود آن را انتخاب کند. اما اگر ارتفاع تصویر مساوی یا کوچکتر از اندازه ظرف باشد ، اثر پیمایش رخ نخواهد داد.

Demo | Download

نتیجه

افزونه های jQuery فوق الذکر همه با استفاده از ترکیبی از نسخه های CSS JavaScript و حتی HTML ساخته شده اند. تغییرات زیادی در افزونه ها وجود دارد، اما همه آنها یک هدف را دنبال می کنن، و آن بالا بردن قابلیت سرگرم کنندگی وتعاملی کردن صفحه وب است. ۱۵ پلاگین محبوب را معرفی کردیم. امیدوارم نحوه کار با افزونه های hover efekt برای شما واضح باشد تا بتوانید از آن ها در سایت یا وبلاگ تان استفاده کنید.

رایج ترین خطاهای مبتدیان در وردپرس

منبع

دانلود قالب شرکتی product-launch

دانلود قالب شرکتی product-launch

نویسنده سید علی اندرزگو

دانلود قالب شرکتی construction

دانلود قالب شرکتی construction

نویسنده سید علی اندرزگو

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.