۱۱ کتابخانه جاوا اسکریپت انیمیشن برای ۲۰۱۹

بیایید درباره استفاده از CSS خالص فراموش نکنیم, چرا؟  از آنجا که این استاندارد است، می تواند عملکرد گرافیکی (GPU) را بهبود بخشد، سازگاری عقب و جلو را فراهم کند، و این فقط ممکن است موثرترین راه برای ایجاد انیمیشن ها باشد.

نمونه ای از انیمیشنی که با CSS ایجاد شده است : لینک

۱. Three.js

در بیش از ۴۳۰۰۰ ستاره در گیت هاب، این کتابخانه محبوب برای ایجاد انیمیشن های سه بعدی در مرورگر است، با استفاده از WebGL به روش بصری اراءه شده است.با فراهم کردن <canvas>، <svg>، CSS3D> و WebGL، این کتابخانه به ما امکان می دهد تجربیات تعاملی غنی در بین دستگاه ها و مرورگرها ایجاد کنیم.

۲. Anime.js

در بیش از ۲۰۰۰۰ ستاره گیت هاب، انیمه جی اس کتابخانه جاوا اسکریپت است که با خواص CSS، تبدیل CSS ،ویژگی SVG یا DOM، و اوجکت های جاوا اسکریپت کار می کند. این کتابخانه به شما امکان خواندن خواص انیمیشن چندگانه را می دهد، همزمان سازی چندین نمونه با هم، ایجاد زمان بندی و موارد دیگر را دارد.

۳. Mo.js

در ۱۴۰۰۰ ستاره گیت هاب، این کتابخانه یک نوار ابزار حرکت گرافیکی برای وب است. شما می توانید چیزهایی را در اطراف DOME یا SVG DOME حرکت دهید یا اشیای mo.js را ایجاد کنید.

۴. Velocity

با ۱۵۰۰۰ ستاره گیت هاب, سرعت یک موتور انیمیشن با همان رابط برنامه نویسی نرم افزار به عنوان جی کوئری $ .animate () است.حتی بدون جی کوئری کار می کند. این فوق العاده سریع است، و ویژگی های انیمیشن نظیر: رنگ، تبدیل، حلقه، تسریع، پشتیبانی SVG، و پیمایش دارد. این بهترین ترکیب جی کوئری و CSS است.

۵. Popmotion

با ۱۴۰۰۰ ستاره گیت هاب, این کتابخانه انیمیشن ۱۱ کیلوبایت حجم دارد که کتابخانه ساده برای ایجاد رابط کاربری لذت بخش است.این اجازه می دهد تا توسعه دهندگان برای ایجاد انیمیشن ها و تعاملات از عمل، که جریان از مقادیر است که می تواند شروع و متوقف شود، و با CSS، SVG، React، three.js و هر رابط برنامه نویسی نرم افزار که عدد را به عنوان یک ورودی پذیرفته، ایجاد کند.

۶. Vivus

با ۱۰۰۰۰ ستاره گیت هاب, Vivus کلاس جاوا اسکریپت بدون وابستگی است که به شما اجازه می دهد که SVG ها را متحرک سازی کنید و ظاهر کشیده شدن آنها را به نمایش بگذارید. شما می توانید از انیمیشن های موجود استفاده کنید یا اسکریپت سفارشی ایجاد کنید تا SVG شما را جلب کند.

۷. GreenSock JS

GSAP یک کتابخانه جاوا اسکریپت برای ایجاد کارایی بالا، بدون وابستگی، انیمیشن های متقابل مرورگر است که ادعا می شود که در بیش از 4 میلیون وب سایت استفاده می شود. GSAP انعطاف پذیر است و با React، Vue، Angular و vanillaJS کار می کند. GSDevtools می تواند انیمیشن های dubug ساخته شده با استفاده از GSAP را کمک کند.

۸. Scroll Reveal

با ۱۵۰۰۰ ستاره گیت هاب و بدون وابستگی، این کتابخانه انیمیشن های اسکرول آسان برای مرورگرهای وب و تلفن همراه را فراهم می کند تا چیزهای متحرک را به صورت اسکرول نشان دهد. این برنامه از انواع مختلفی از اثرات پشتیبانی می کند و حتی به شما اجازه می دهد که انیمیشن ها را با استفاده از زبان طبیعی تعریف کنید.

۹. Hover (CSS)

این یک کتابخانه CSS است. با ۲۰۰۰۰ ستاره گیت هاب Hover مجموعه ای از جلوه های شناور CSS3 را برای اعمال لینک ها، دکمه ها، آرم ها، SVG، تصاویر برجسته و غیره، در دسترس برای CSS، Sass و LESS فراهم می کند. شما می توانید اثری را که می خواهید در شیوه ی خود استفاده کنید را کپی کرده و چسباندید یا به شیوه ی جدول ارجاع دهید.

۱۰. Kute.js

یک موتور انیمیشن جاوا اسکریپت با ویژگی های ضروری برای انیمیشن های متقابل مرورگر است. تمرکز کیفیت کد، انعطاف پذیری، عملکرد و اندازه (موتور هسته 17K دقیقه و 5.5K gzip) دارد. کتابخانه نیز قابل گسترش است تا شما بتوانید ویژگی های خود را اضافه کنید.

۱۱. Typed.js

با ۶۰۰۰ ستاره گیت هاب, اجازه می دهد انیمیشن های تایپ کردن را برای رشته ها در سرعت های انتخاب شده ایجاد کنید.شما همچنین می توانید یک div در HTML صفحه قرار دهید و آن را بخوانید تا دسترسی به موتورهای جستجو و کاربران با جاوا اسکریپت غیرفعال شود. این کتابخانه محبوب است که سایت های معروف نظیر اسلک و … استفاده می کند.

پیوند bitsrc

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *