خواندن ۲ دقیقه·۳ سال پیش

3کتابخانه خوب جاوا اسکریپت در زمینه انیمیشن(از نگاه ما)

سلام دوستان . امروز و در این مطلب قصدا داریم که 3کتابخانه بسیار محبوب از جاوا اسکریپت در زمینه انیمیشن(البته تحت وب) را معرفی کنیم با ما همراه باشید

مقدمه

آیا میخواهید که کاربران بیشتری به سمت سایت شما جذب شوند؟ پس قطعا یکی از بهترین راه ها استفاده از انیمیشن ها در سایت است . منظور از انیمیشن این انیمیشن هایی که تماشا میکنیم نیست . انیمیشن ها در وب مثلا همان متنی هست که به صورت تایپی نمایش داده میشود

جاوا اسکریپت یکی از بهترین زبان های برنامه نویسی تحت وب است که البته کاربرد های دیگری هم در ساخت برنامه در پلتفرم های مختلف دارد . برای کسب اطلاعات بیشتر این مقاله را مطالعه کنید:

جاوا اسکریپت چیست؟ یادگیری و بازار کار

انیمیشن در جاوااسکریپت:

شما با استفاده از تصاویری که فرمت SVG دارند و همچنین با استفاده از زبان نشانه گذاریCSS میتوانید جلوه های بصری زیبایی به سایت خود بدهید اما جالب تر آن است که مثلا وقتی یک کاربر روی ارسال نظر کلیک کرد یه پنجره کوچیک پاپ آپ نشان داده بشه که نظر شما با موفقیت ارسال شد

پیش نیاز ها:

قبل از هر چیزی حتما باید آشنایی اولیه با HTML،CSS،JavaScript داشته باشید . سپس شروع به یادگیری هر کدوم که دلتون خواست کنید

کتابخانه های انیمیشن جاوا اسکریپت:

Anime.js:

یکی از سریع ترین و سبک ترین کتابخانه های جاوا اسکریپت به شمار میرود که توسط جولیا گاردنر طراحی شده است . این فریم ورک با مرورگرهای Chrome

Firefox و Internet Explorer 11 قابلیت سازگاری دارد

آیا دوست دارید که یک بار امتحانش کنید حالا تفریحی یه بار امتحانش کنید بد نیست خخخخخخ:

این کد را در قسمتhead جایگذاری کنید:

<script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot>

توضیحات بیشتر در گیت هاب:

https://github.com/juliangarnier/anime

در اینجا یک مثال کاملا ساده توضیح داده شده است:

<!DOCTYPE html>
<html lang=&quoten&quot>
  <head>
    <script src=&quothttps://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js&quot>
    <title>AnimeJS Animation</title>
  </head>
  <body>
    <div style=&quotbackground-color: purple; height: 100px; width: 100px&quot></div>
    
      anime({
        targets: &quotdiv&quot,
        translateX: 600,
        translateY: 600,
        rotate: [180, -180],
        borderRadius: 150,
        duration: 3000,
        easing: &quoteaseInOutSine&quot,
        direction: &quotalternate&quot,
        loop: true,
      });
    
  </body>
</html>

Howler.js:

یکی دیگر از بهترین فریم ورک های جاوااسکریپت در زمینه انیمیشن است به خصوص زمانی که شما قصد دارید یک بازی تحت وب بسازید . همچنین یک فریم ورک متن باز (Open Source) است

Howler.js از تمامی فرمت های صوتی و تصویری مثل MP3،OGG،WAV،MPEG،MP4 را پشتیبانی میکند و همچنین قابلیت پخش و توقف و حلقه(دوباره تکرار شدن رسانه) را دارد

Typed.js:

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

گروه آموزشی کلاسیک ایرانیان

برنامه نویسی را با عشق یاد بگیر: https://classiciranian.ir

شاید از این پست‌ها خوشتان بیاید