در این آموزش jQuery , قصد داریم به شما نحوه ایجاد افکت Flip عکس با جی کوئری و CSS را نمایش بدیم. در آموزش های قبلی نحوه ایجاد چرخش عکس با jQuery را دیدیم.
افکت Flip عکس همان قرینه کردن یک تصویر است بصورتی که چپ و راست آن تغییر می کند و یک حالت همانند نگاه کردن به تصویر از طریق آینه بوجود می آید.
در این مثال, ما تصویر را با استفاده از ۳D transform در جهت افقی قرینه می کنیم. ما از خاصیت transform در CSS برای قرینه کردن عکس در جهت محورX بهره می بریم.
این خاصیت CSS توسط jQuery اعمال می شود.
کد HTML و CSS تصویر
این کد به شما یک تصویر و دکمه برای قرینه کردن تصویر را نمایش می دهد.
|
1 2 3 4 5 6 |
<div id="flip-box"> <img src="fixed_bg.jpg"> </div> <div id="flip-link" class="demo-submit"> Flip the Image </div> |
و استایل های CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> #flip-box { width: 200px; height: 150px; transition: 0.9s; transform-style: preserve-3d; position: relative; } .demo-submit{ padding: 10px 20px; background: #555; border: 0; color: #FFF; display:inline-block; margin-top:20px; } </style> |
کد افکت Flip عکس با جی کوئری
اسکریپت jQuery زیر به شما نحوه تغییر خاصیت transform یا همان چرخش را همگام با رویداد click را نشان می دهد. با تغییر ویژگی transform تصویر قرینه شده و بعد از آن تصویر بعدی نمایش داده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $("#flip-link").on("click",function(){ if($("#flip-box").css("transform") == 'none') { $("#flip-box").css("transform","rotateY(180deg)"); $("#flip-box img").attr("src","fixed_bg1.jpg"); } else { $("#flip-box").css("transform",""); $("#flip-box img").attr("src","fixed_bg.jpg"); } }) </script> |
امیدوارم از آموزش افکت Flip عکس با جی کوئری نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
خیلی جالب بود …
مرسی از این آموزش خوب 🙂
سلام. خیلی خوشحالیم که مفید واقع شده.
موفق باشید.