• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 880 ۱۶ تیر ۹۴

در این مطلب میخوام یک ابزار زیبا بنام 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

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram