ImageTiltEffect : افکت کج شدن زیبا برای اعمال به تصاویر

- visibility ۰ mode_comment

در این مطلب میخوام یک ابزار زیبا بنام ImageTiltEffect رو خدمت شما معرفی کنم و اونو آموزش بدم.

sample

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

میبینید که زمانی که روی تصویر مورد نظر هاور میکنید ، افکت زیبایی بر روی اون اعمال میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به tilteffect.css و tiltfx.js نیاز داریم. این فایلهارو رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

در ابتدا باید یک div قرار بدین که این div نقش پدر تصویر رو بازی میکنه و تصویر رو در خودش جای میده. چون این ابزار ، تصویر رو به اندازه عنصر پدرش در میاره. درون اون هم یک تگ img قرار میدم :

استایل زیر رو برای div در نظر میگیرم :

همونطور که میبینید برای img آی دی sample_image رو قرار دادم. حالا میام و در تگ اسکریپت نهایی اون رو انتخاب میکنم و درون متغیر element میریزم :

برای استفاده از این ابزار باید یک نمونه جدید از شئ TiltFx رو بسازید. این نمونه دو تا ورودی دریافت میکنه. اولی اون المنتی که میخواد افکت روش اعمال بشه و دومی تنظیمات و ویژگی های مورد نظر :

باید درون {} ویژگی ها و مقادیر مدنظر خودمون رو قرار بدیم. نمونه ای که در دمو قرار داده شده ، دارای مقادیر زیر هست :

توضیح هر کدام :

  • extraImgs : با استفاده از این ویژگی میتونین تعداد کپی که از تصویر گرفته میشه رو مشخص کنید
  • opacity : شفافیت هر کپی رو مشخص میکنه
  • bgfixed : مشخص میکنه که تصویر پس زمینه و اصلی ثابت باشه یا متحرک
  • perspective : میتونین فاصله دید خودتون رو مشخص کنید
  • translateX : میزان جابجا شدن در جهت x
  • translateY : میزان جابجا شدن در جهت y
  • translateZ : میزان جابجا شدن در جهت z
  • rotateX : میزان چرخش حول محور x
  • rotateY : میزان چرخش حول محور y
  • rotateZ : میزان چرخش حول محور z

دیدید که به چه سادگی میشه از این ابزار زیبا استفاده کرد.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.