بهترین کتابخانه های انیمیشن جاوا اسکریپت در سال 2021

اگر دنبال این هستید که وب سایت تان جذاب باشد و بازدیدکنندگان لذت ببرند چه چیزی بهتر از انیمیشن است؟

با استفاده از ده ها کتابخانه انیمیشن رایگان در سراسر وب می توان برای المان های وب سایت انیمیشن طراحی کرد. مانند افکت های bounce و fade

در این پست می خواهیم بهترین کتابخانه های انیمیشن جاوا اسکریپتی را معرفی کنیم.

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

در مواقعی که می خواهیم فقط یک انیمیشن ساده روی المان اجرا کنیم، مانند fade، استفاده از CSS پیشنهاد می شود. اما برای پیاده سازی انیمیشن های پیچیده تر و پیشرفته تر روی المان های DOM استفاده از جاوا اسکریپت پیشنهاد می شود. توسط javascript می توان چالش بیشتری را با انیمیشن ها تجربه کرد.

زبان برنامه نویسی جاوا اسکریپت می تواند انیمیشن هایی را طراحی کند که CSS قادر به انجام آنها نمی باشد.

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

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

Anime.js

می خواهیم لیست کتابخانه های انیمیشن در جاوا اسکریپت را با Anime.js شروع کنیم. کتابخانه انیمیشن Anime.js سبک و بسیار پرطرفدار است. در سایت Github بیش از 38 هزار ستاره دریافت کرده است.

از یک API قدرتمند بهره می برد و می توان از آن برای اعمال انیمیشن روی المان های DOM مانند تصاویر SVG استفاده کرد. توسط انیمیشن های پیش فرض Anime می توان افکت های پیشرفته و همزمان را براحتی اجرا کرد.

بوسیله توابع callback پیش فرض و توابع کنترلی Anime.js می توان کنترل کامل روی انیمیشن ها داشت. مثلا آنها را play, pause, reverse کرد. برای مشاهده لیست کامل افکت های Anime.js به سایت Codepen مراجعه کنید.

مثال AnimeJS

به منظور استفاده از انیمیشن های Anime.js ابتدا اسکریپت کتابخانه اش را باید در صفحه HTML خود فراخوانی کنید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

سپس مطابق کد زیر یک انیمیشن ساده تعریف کنید:

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

مشاهده انیمیشن در CodePen:

See the Pen JS Animation by Ehsan Safari

Velocity.js

کتابخانه انیمیشن Velocity.js ترکیبی از افکت های جی کوئری و css را شامل می شود. حدود 17 هزار ستاره در سایت Github دریافت کرده است.

اجرای افکت های looping, delaying, hiding, showing و… توسط Velocity.js براحتی امکان پذیر است. برای کار با اسکرول پنجره مرورگر نیز مناسب است. کتابخانه Velocity می تواند با jQuery یا مستقل از آن کار کند.

نمونه ای از انیمیشن velocity.js

فایل html

  <div class="box">
    <div class="boxCorner1"></div>
    <div class="boxCorner2"></div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.0.0/velocity.min.js"></script>

فایل js

$('.box').velocity({
  rotateX: '360deg',
  rotateY: '360deg'
},{
  duration:2000,
  loop:true,
  easing:'linear'
});

فایل css

body {
  padding-top:2em;
  background-image:radial-gradient(circle, #555, #333 90%);
  perspective:800px;
}

.box {
  margin:4em auto;
  width:10em;
  height:10em;
  transform-style:preserve-3d;
  transform-origin:50% 50% -5em;
  position:relative;
  transform:rotateX(-45deg);
}

.box div {
  position:absolute;
  width:10em;
  height:10em;
  background-color:#4c4c4c;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

.boxCorner2 {
  transform:rotateX(180deg) translateZ(10em);
}

.boxCorner1::before, .boxCorner1::after, .boxCorner2::before, .boxCorner2::after {
  position:absolute;
  content:'';
  display:block;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}

.boxCorner1::before, .boxCorner2::before {
  transform:rotateY(90deg);
  transform-origin:0 50%;
  background-color:#444;
}

.boxCorner2::before {
  transform-origin:100% 50%;
  transform:rotateY(-90deg);
}

.boxCorner1::after, .boxCorner2::after {
  transform:rotateX(-90deg);
  transform-origin:50% 0;
  background-color:#555;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

Popmotion:

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

در واقع این لایبرری می تواند با هر API که اعداد را بعنوان ورودی می گیرند کار کند. مانند ReactJS و Three.js و PixiJS

حجم کتابخانه جاوا اسکریپتی Popmotion فقط 11.7kb است. این کتابخانه شامل امکاناتی نظیر keyframes, timeline و غیره می باشد. popmotion همچنین این امکان را دارد که با استفاده از pure function ها تنظیمات سفارشی خود را برای انیمیشن تعریف کنیم.

نمونه ای از انیمیشن Popmotion:

کد html

<div class="box"></div>
<script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>

کد js

const { styler, spring, listen, pointer, value } = window.popmotion;

const ball = document.querySelector('.box');
const divStyler = styler(ball);
const ballXY = value({ x: 0, y: 0 }, divStyler.set);

listen(ball, 'mousedown touchstart')
  .start((e) => {
    e.preventDefault();
    pointer(ballXY.get()).start(ballXY);
  });

listen(document, 'mouseup touchend')
  .start(() => {
    spring({
      from: ballXY.get(),
      velocity: ballXY.getVelocity(),
      to: { x: 0, y: 0 },
      stiffness: 200,
      // mass: 1,
      // damping: 10
    }).start(ballXY);
  });

کد css

.box {
  width: 100px;
  height: 100px;
  background-color: #0074d9;
  border-radius: 50%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 400px;
}

خروجی انیمیشن در codepen:

See the Pen JS Animation by Ehsan Safari

Three.js

کتابخانه انیمیشن جاوا اسکریپتی Three.js با بیش از 60 هزار ستاره در سایت Github یکی از محبوب ترین و پر استفاده ترین کتابخانه های javascript برای پیاده سازی انیمیشن های پیشرفته می باشد.

لایبرری Three.js برای تولید و رندر انیمیشن های سه بعدی یا 3D از WebGL استفاده می کند.

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

مثالی از کتابخانه Three.js

فایل html

<canvas id="graphics-box"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js "></script>

فایل js

function main() {
        const canvas = document.querySelector("#graphics-box");
        const renderer = new THREE.WebGLRenderer({ canvas });
        const fov = 80;
        const aspect = 2;
        const near = 0.2;
        const far = 4;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.z = 4;
        const scene = new THREE.Scene();
        const boxWidth = 2;
        const boxHeight = 2;
        const boxDepth = 4;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
        const material = new THREE.MeshBasicMaterial({ color: 0x32aa72 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        function render(time) {
          time *= 0.0002; // convert time to seconds
          cube.rotation.x = time;
          cube.rotation.y = time;
          renderer.render(scene, camera);
          requestAnimationFrame(render);
        }
        requestAnimationFrame(render);
      }
      main();

فایل css

body {
  margin: 0;
  height: 200vh;
}
canvas {
  display: block;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

GreenSock GSAP JS

کتابخانه GSAP با مجموعه ای از فایل های کوچک جاوا اسکریپتی کار می کند که باعث می شود انیمیشن های ایجاد شده توسط GSAP در تمام مرورگرها بخوبی نمایش داده شوند. چندین انیمیشن را بطور زنجیره وار و آهسته و نرم: Smooth به یکدیگر تبدیل می کند.

لایبرری GSAP روی المان های Canvas انیمیشن اجرا می کند و می تواند با ابزارها و پلاگین های مختلف مانند SVGPlugin، PixiPlugin، WebGL و EaseJS کار کند. ساختار ماژولار GSAP باعث می شود بتوانید فانکشن مورد نیاز خود را انتخاب کنید.

کتابخانه GSAP با بیش از 10 هزار ستاره در Github و 8 میلیون کاربر یکی از قدرتمندترین کتابخانه های جاوا اسکریپت برای طراحی انیمیشن در وب سایت و وب اپلیکیشن می باشد.

مثالی ساده از انیمیشن GSAP:

فایل html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
 <div class="circle"></div>

فایل js

gsap.to(".circle", {
       duration: 3,
       x: 1000,
       scale: 4,
     });

فایل css

body {
       background: #f3034f;
       display: flex;
       width: 92vw;
       height: 88vh;
       justify-content: center;
       align-items: center;
     }

     .circle {
       background: #78db74;
       width: 50px;
       height: 50px;
       border-radius: 100%;
     }

خروجی GSAP در codepen

See the Pen JS Animation by Ehsan Safari

AniJS

در بین کتابخانه های جاوا اسکریپتی که تا بحال معرفی کردیم AniJS منحصر بفرد و خاص است. زیرا تعریف انیمیشن توسط AniJS ساده است و کار با آن برای افراد مبتدی راحت است. همچنین در طراحی تجربه کاربری یا UX Design نیز قابل استفاده است.

لایبرری AniJS در سایت Github بیش از 3.5k ستاره از کابران دریافت کرده است و کتابخانه AniJS به هیچ کتابخانه دیگری نیاز ندارد و مستقلا کار می کند. همچنین امکان تعریف انیمیشن را در پلتفرم های Android و IOS نیز فراهم می کند.

مثال AniJS

فایل html

 <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
<div class="container center">
    <p>Just scroll the window ;)</p>
    <div class="item orange" 
         data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
      <i class="fa fa-behance"></i>
    </div>
    <div class="item pink"
      data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal">
      <i class="fa fa-pinterest"></i>
    </div> 
    <div class="item green"
      data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal">
      <i class="fa fa-dribbble"></i>
    </div>
    <div class="item blue"
      data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal">
      <i class="fa fa-dropbox"></i>
    </div>
    <div class="item orange"
        data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal">
        <i class="fa fa-html5"></i>
    </div>
    <div class="item pink"
      data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal">
      <i class="fa fa-wordpress"></i>
    </div> 
    <div class="item green"
      data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal">
      <i class="fa fa-reddit"></i>
    </div>
    <div class="item blue"
      data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal">
      <i class="fa fa-umbrella"></i>
    </div>
  </div>
  <!-- End example -->

<script src="https://anijs.github.io/lib/anijs/anijs.js"></script>
<script src="https://anijs.github.io/lib/anijs/helpers/scrollreveal/anijs-helper-scrollreveal.js"></script>

فایل css

/*The CSS example*/
.item{
  padding: 100px;
  color: white;
  width: 70px;
  text-align: center;
  font-size: 3em;
  display: inline-block;
  margin-right:10px;
  margin-top: 10px;
}

.item i{
}

.blue{
  background-color: #3498db;  
}

.orange{
  background-color: #FBB44C;
}

.pink{
  background-color: #FC797A;
}

.green{
  background-color:#2ABB9B;
}

.container p{
  color: #888;
  padding: 40px 0;
}



/*End CSS example*/

/*Other CSS*/
body{
  font-family: helvetica;
  font-size: 1.2em;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  position:relative;
  width: 50%;
}

.container{ 
  margin-top: 50px;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

Mo.js

طراحی موشن گرافیک یکی از بخش های اصلی و انکارناپذیر انیمیشن ها می باشد. توسط Mo.js می توان به این هدف رسید.

با داکیومنت ها و آموزش های زیادی که کتابخانه MoJS دارد افراد آماتور هم می توانند از آن برای طراحی انیمیشن و موشن های دلخواه خود استفاده کنند.

API های لایبرری MoJS ممکن است ساده بنظر برسند اما قابلیت ها و ویژگی های فراوانی در اختیار کاربران قرار می دهند. بوسیله جعبه ابزار یا ToolKit این کتابخانه، می توان از Curve Editor، TimeLine Editor و Player این کتابخانه استفاده کرد. توسط Player امکان این را خواهید داشت که کنترل اجرای انیمیشن را مانند تماشای فیلم در دست بگیرید. مثلا آنرا pause کنید.

کتابخانه MoJS با حدود 16K ستاره در Github یکی از لایبرری های کاربردی جاوا اسکریپت برای تولید انیمیشن می باشد.

مثالی از انیمیشن کتابخانه MoJS:

فایل html

 <button class="start">Start</button>
    <div class="container">
      <div class="box x"></div>
      <div class="box y"></div>
      <div class="box z"></div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

فایل js

var A = new mojs.Html({
      el: ".x",
      x: {
        0: 200,
      },
      angleZ: {
        0: 180,
      },
      duration: 1500,
      repeat: 3,
      isYoyo: true,
    });
    var B = new mojs.Html({
      el: ".y",
      x: {
        200: 0,
      },
      angleY: {
        0: 720,
      },
      angleZ: {
        0: 720,
      },
      duration: 1500,
      repeat: 4,
    });
    var C = new mojs.Html({
      el: ".z",
      x: {
        0: 200,
      },
      angleY: {
        0: 360,
      },
      scaleZ: {
        1: 2,
      },
      skewX: {
        0: 60,
      },
      duration: 1500,
      repeat: 5,
      isYoyo: true,
    });
    document.querySelector(".start").addEventListener("click", function () {
      A.play();
      B.play();
      C.play();
    });

فایل css

body {
  margin: 20px auto;
  font-family: "Serif";
  font-weight: 300;
  width: 600px;
  font-size: 1.3em;
}
.box {
  width: 70px;
  height: 70px;
  margin-top: 40px;
}
.x {
  background: cyan;
}
.y {
  background: purple;
}
.z {
  background: orange;
}
.container {
  perspective: 100px;
}
.start {
  background: red;
  border: none;
  color: white;
  font-family: "Serif";
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  margin: 20px;
  font-weight: 300;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

Vivus.js

اگر می خواهید طراحی با مداد را در بستر وب شبیه سازی کنید کتابخانه Vivus.js مناسب اینکار است!

لایبرری Vivus.js این امکان را فراهم می کند که به SVG های موردنظر، افکت نقاشی شدن را بدهیم. از آنجا که Vivus به هیچ ابزار دیگری وابسته نیست، سبک و کم حجم است.

همچنین می توان با تعریف اسکریپت سفارشی، کار نقاشی SVG را بصورت دستی انجام داد. Vivus برای انعطاف بیشتر این قابلیت را دارد که برای هر path در svg موردنظر یک تابع جاوا اسکریپتی سفارشی تعریف کنیم.

کتابخانه Vivus با بیش از 13 هزار ستاره ای که در Github تعریف کرده یکی از لایبرری های محبوب برنامه نویسان جاوا اسکریپت می باشد.

نمونه ای از انیمیشن Vivus در codepen

See the Pen JS Animation by Ehsan Safari

ScrollReveal JS

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

کتابخانه انیمیشن ScrollReveal بدون وابستگی به ابزارهای دیگر، بیش از 18 هزار ستاره از کاربران در Github دریافت کرده است.

لایبرری ScrollReveal از نواع مختلف انیمیشن پشتیبانی می کند و بخوبی در تمام مرورگرهای موبایل و وب کار می کند.

مثالی از Scroll-Reveal در codepen

See the Pen JS Animation by Ehsan Safari

Typed.js

لایبرری Typed.js یک کتابخانه ساده و سبک است که بیشتر شبیه پلاگین است تا کتابخانه. این کتابخانه می تواند افکن تایپ شدن متن را روی متون پیاده سازی کند. وقتی رشته موردنظر را به لایبرری Typed.js ارائه دهید انیمیشن تایپ شدن متن روی آن اعمال می شود.

سرعت تایپ شدن جمله را می توان به دلخواه تنظیم کرد. اگر می خواهید کاربرانی که javascript مرورگر خود را غیرفعال کرده اند نیز این جمله را مشاهده کنند، می توانید در یک div تعریف کنید. در اینصورت موتورهای جستجو می توانند جمله را مشاهده و ایندکس کنند.

این لایبرری در Github بیش از 10 هزار ستاره گرفته است و سایت های قدرتمندی مانند Slack و Envato از کتابخانه Typed.js استفاده می کنند.

مثالی از لایبرری Typed.js:

فایل html

<div class="center">
      <p>Welcome to <span class="animate"></span></p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

فایل js

var typed = new Typed(".animate", {
     strings: [
       "Rahkarino Academy",
       "Typed.js Animation Course",
     ],
     typeSpeed: 40,
     backDelay: 50,
     backSpeed: 30,
     loop: true,
   });

فایل css

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.center {
  top: 55%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: large;
  width: 100%;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

Lottie:

کتابخانه Lottie یک لایبرری سبک است برای طراحی انیمیشن های گرافیکی که در تمام پلتفرم های وب، موبایل: android-ios قابل استفاده می باشد. نیازی به ابزار ثانویه ندارد و از تمام مرورگرها پشتیبانی می کند.

انیمیشن های Lottie بصورت متن ساده یا plain text ذخیره می شوند. چونکه داده ای متنی با فرمت JSON ذخیره می شوند، در هر محیط جاوا اسکریپتی قابل استفاده و سفارشی سازی خواهد بود.

لایبرری Lottie با بیش از 30 هزار ستاره ای که در سایت Github از کاربران دریافت کرده، می تواند گزینه مناسبی برای پیاده سازی انیمیشن باشد.

مثالی از انیمیشن Lottie:

فایل html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player 
  src="https://assets5.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json"  background="transparent"  speed="1" loop controls autoplay >
</lottie-player>

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

KUTE.js:

کتابخانه KUTE.js قادر است انیمیشن های پیچیده ای بسازد که توسط CSS نمی توان آنها را ایجاد کرد. تمرکز لایبرری KUTE.js روی کارایی، کیفیت کد، مصرف حافظه و انعطاف پذیری انیمیشن ها می باشد.

شما می توانید آخرین نسخه این کتابخانه را از سایت مرجع KUTE دانلود کنید یا از آدرس CDN آن در پروژه خود استفاده کنید.

مثالی از انیمیشن KUTE.js

فایل html

<button class="start">Start Animation</button>
<h1><span class="h">H</span><span class="e">E</span><span class="la">L</span><span class="lb">L</span><span class="o">O</span></h1>
 <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script>

فایل js

var theLetters = document.querySelectorAll("span");
var h = document.querySelector(".h");
var e = document.querySelector(".e");
var la = document.querySelector(".la");
var lb = document.querySelector(".lb");
var o = document.querySelector(".o");
var startButton = document.querySelector(".start");

var animateColor = KUTE.allFromTo(
  theLetters,
  { color: 'white' },
  { color: 'red' },
  { offset: 200, duration: 50}
);

var animateFontSize = KUTE.allFromTo(
  theLetters,
  { fontSize: '2em' },
  { fontSize: '4em' },
  { offset: 100, duration: 200, repeat: 10, yoyo: true }
);

var animateSkewing = KUTE.allTo(
  theLetters,
  { skewX: -15},
  { offset: 200, duration: 200 }
);

var animateH = KUTE.to(
  h,
  { color: '#009688' }
);

var animateE = KUTE.to(
  e,
  { translateY: -40, color: '#E91E63' }
);

var animateLA = KUTE.to(
  la,
  { color: '#8BC34A' }
);

var animateLB = KUTE.to(
  lb,
  { translateY: 20, color: '#FFC107' }
);

var animateO = KUTE.to(
  o,
  { color: '#FF5722' }
);

var lettersSqueezed = KUTE.allTo(
  theLetters,
  { letterSpacing: '-15px' },
  { offset: 0, duration: 200 }
);

animateColor.chain(animateFontSize);
animateFontSize.chain(animateSkewing);
animateSkewing.chain(animateH, animateE, animateLA, animateLB, animateO);
animateE.chain(lettersSqueezed);

startButton.addEventListener(
  "click",
  function() {
    animateColor.start();
  },
  false
);

فایل css

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

h1 {
  font-size: 3em;
  color: white;
  font-family: 'Luckiest Guy';
  text-shadow: 2px 2px 0 black, -2px -2px 0 black;
}

h1 span {
  display: inline-block;
}

.e, .lb {
  position: relative;
  z-index: 99;
}


button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}

خروجی انیمیشن در codepen

See the Pen JS Animation by Ehsan Safari

جمع بندی:

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

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

در صورتی که بخواهید قدرتمندترین کتابخانه های انیمیشنی جاوا اسکریپت را در یک خط لیست کنیم می توانیم به موارد زیر اشاره کنیم:

Anime.js, Velocity.js, GreenSock.js, Popmotion.js

اگر بدنبال کتابخانه ای برای پیاده سازی انیمیشن های سه بعدی در javascript می گردید، پیشنهاد ما Three.js است.

اگر هدف شما اجرای انیمیشن تایپ شدن متون می باشد استفاده از لایبرری Typed.js پیشنهاد می شود.

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

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