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

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



  آیا می دانید تا کنون 6271 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

animsition : پلاگین jQuery برای قرار دادن افکت ورودی و خروجی

0 1319 ۱۶ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام animsition رو خدمت شما معرفی کنم و اونو آموزش بدم.

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

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

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

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

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. بهمین ترتیب میتونین صفحات page2.html و page3.html رو قرار بدین و محتویاتشو تغییر بدین.

اولین کاری که باید بکنید ، اینه که به div پدر و اصلی کلاس animsition رو نسبت بدین. با این کار به پلاگین میگیم که افکت مورد نظر ، روی این div و محتویاتش اعمال بشه. بصورت زیر :

هر صفحه میتونه یک افکت خروجی و یک افکت ورودی متفاوت داشته باشه. برای اینکار باید به همین div خصوصیتهای زیر رو نسبت بدین :

  • data-animsition-in : نوع افکتی که در زمان ورود به صفحه انجام میشه
  • data-animsition-in-duration : مدت زمان افکت ورودی بر حسب میلی ثانیه
  • data-animsition-out : نوع افکتی که در زمان خروج از صفحه انجام میشه
  • data-animsition-out-duration : مدت زمان افکت خروجی بر حسب میلی ثانیه

انواع مختلفی برای افکت وجود داره ، که میتونین اونا رو در اینجا ببینید.

Animsition1

فرض کنید من برای صفحه page1.html میخوام از افکتهای Fade Up استفاده کنم. برای ورودی از fade-in-up و برای خروجی از fade-out-up استفاده میکنم. بنابراین تا اینجا کد بصورت زیر خواهد بود :

برای ورودی زمان 1000 میلی ثانیه و برای خروجی 800 میلی ثانیه رو مشخص کردم.

برای لینکهایی که بین صفحات مختلف جابجا میشن ، باید کلاس animsition-link رو نسبت بدین. بصورت زیر :

در نهایت هم باید در تگ اسکریپت نهایی ، کدهای زیر رو قرار بدین و پلاگین رو صدا بزنید :

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram