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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

CSShake : ابزاری برای افزودن افکت لرزان به عناصر DOM

0 2384 ۲۹ دی ۹۳

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

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

همونطور که میبینید ، بعضی از مربعها ثابت هستند و وقتی روی اونا هاور میکنید ، به لرزه در میان. بعضی دیگه هم از ابتدا در حال لرزیدن هستن و با هاور کردن ، متوقف میشن.

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

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

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

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

تا اینجا کار خاصی نکردیم ، فقط 6 تا div قرار دادیم که میخوایم اونا رو به لرزش در بیاریم.

اولین کاری که باید بکنیم اینه که ، به هر عنصری که میخوایم به لرزش در بیاد ، کلاس shake رو نسبت بدیم. بصورت زیر :

حالا اگه عنصر مورد نظر رو ببینید ، با یه حالت ملایمی به لرزه در میاد. البته زمانی که روی اون هاور کنید. اگر بخواین کاری کنید که از ابتدا در حال لرزیدن باشه ، باید کلاس shake-constant رو نیز به اون نسبت بدین. بصورت زیر :

در این حالت اگر بر روی این عنصر هاور کنید ، متوقف نمیشه. اگر بخواید کاری کنید که با هاور کردن متوقف بشه ، باید کلاس hover-stop رو نیز به اون نسبت بدین. بصورت زیر :

انواع زیادی مدل لرزیدن وجود داره که من چندتاشو براتون توضیح میدم :

  • shake-hard : به سختی میلرزه
  • shake-slow : به آرامی میلرزه
  • shake-little : دامنه لرزشش کم هست
  • shake-horizontal : بصورت افقی میلرزه
  • shake-vertical : بصورت عمودی
  • shake-rotate : بصورت چرخشی
  • shake-opacity : با کم و زیاد شدن opacity
  • shake-crazy : بصورت دیوانه وار میلرزه

میتونین از هر مدلی که خواستین استفاده کنید و در سایتتون قرار بدین.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram