آموزش جامع انیمیشن سازی با جاوا اسکریپت و Greensock - آخرین آپدیت
دانلود Master JavaScript Animations with Greensock
ارتقای مهارتهای فرانتاند شما
آموزش جامع انیمیشنهای وب با JavaScript و CSS
یادگیری انیمیشنهای جذاب و حرفهای در فرانتاند:
- انیمیشنهای JavaScript
- انیمیشنهای CSS
- استفاده از کتابخانه GreenSock (GSAP)
- انیمیشنهای اسکرول (Scroll Animations)
- ساخت تایملاینهای انیمیشنی
- و موارد دیگر...
پیشنیازها:
- یک کامپیوتر
- VS Code یا یک ویرایشگر کد دیگر
- کمی پشتکار
توسعه فرانتاند دنیای شگفتانگیزی است، اما تسلط بر تمام مهارتهای مورد نیاز برای درخشش در این صنعت میتواند سریعاً دشوار شود.
نگران نباشید! من اینجا هستم تا به شما کمک کنم.
در این دوره، ما کشف خواهیم کرد که چگونه انیمیشنهای JavaScript خیرهکنندهای را با بهترین کتابخانه موجود، GreenSock، بسازیم!
بیش از 10 سال است که این کتابخانه ابزارهای خوبی را در اختیار جهان قرار میدهد تا محدودیتهای خلاقیت را جابجا کند.
در واقع نمیتوانید ابزار بهتری در این زمینه پیدا کنید، این ابزار قوی، ایمن، قابل اعتماد و بسیار غنی است.
با GreenSock میتوانیم:
- عناصر را با استفاده از سه هسته اصلی tweens (انیمیشنها) متحرک کنیم.
- با پلاگین دوستداشتنی ScrollTrigger آنها، هنگام اسکرول انیمیشن اجرا کنیم.
- تایملاینها یا "کانتینرهای انیمیشن" را ایجاد کنیم (همانطور که من دوست دارم آنها را صدا کنم).
- از تعداد زیادی ویژگی و متد سودمند استفاده کنیم.
- هر عنصری از صفحه وب را با مقادیر تصادفی، فریمهای کلیدی، جلوه stagger (پراکندگی)، easings (نرمی حرکت) غنی و غیره متحرک کنیم.
- توالیهای پیچیدهای را با پارامترهای موقعیت ایجاد کنیم.
- همچنین میتوانیم از GSAP با canvas، three.js، Barba.js و تمام کتابخانههای انیمیشن معروف استفاده کنیم.
- و در نهایت میتوانیم از آن در Vanilla JS یا با تمام فریمورکهای اصلی JS استفاده کنیم.
من یک پوشه برای دنبال کردن این دوره آماده کردهام که شامل سه زیر پوشه است:
- یک sandbox که ما برای کشف و بازی با متدها و ویژگیهای مختلف استفاده خواهیم کرد.
- یک sandbox انیمیشن اسکرول برای کشف پلاگین کاملاً جدید ScrollTrigger
- و در نهایت یک پوشه پروژهها، با تمام کدهای منبع و فایلهای شروع.
جذاب به نظر میاد، نه؟
شما را در طرف دیگر میبینم تا کدنویسی را شروع کنیم. ✔️
مقدمه Introduction
-
مقدمه Introduction
-
کد منبع Source Code
-
منابع Ressources
مبانی GreenSock The basics of GreenSock
-
متد gsap.to() The gsap.to() method
-
متد gsap.from() The gsap.from() method
-
آخرین متد توئین: gsap.fromTo() The last tween method : gsap.fromTo()
-
Easing با GSAP The Easing with GSAP
-
ویژگیهای Utility Utility props
-
روش Stagger The stagger way
-
انیمیت کردن مقادیر تصادفی Animate random values
-
استفاده از Keyframes در GreenSock Using the greensock Keyframes
-
راهاندازی کالبکهای رویداد Trigger some event callbacks
-
چگونه یک توئین را ذخیره کنیم؟ How to save a tween ?
-
تنظیم مقادیر Set some values
-
متدهای Utility توئینها The utility methods of the tweens
تایملاینها The Timelines
-
راهاندازی یک تایملاین Setting up a Timeline
-
پارامترهای Position The position parameters
-
ویژگیها و متدهای تایملاین Properties and methods of the timeline
-
متدهای کاربردی add() و addLabel() The add() and addLabel() handy methods
پروژههای GreenSock Greensock Projects
-
پروژه انیمیشنهای Reveal Reveal animations project
-
پروژه لودر رستوران Restaurant Loader project
-
شمارش معکوس عمودی Vertical countdown
-
اسلایدر افقی Horizontal Slider
-
اسلایدر افقی II Horizontal Slider II
-
اسلایدر افقی III Horizontal Slider III
انیمیت کردن در اسکرول با ScrollTrigger Animate on Scroll with ScrollTrigger
-
پیادهسازی اولیه Basic implementation
-
تغییر موقعیت Trigger و Scroller Change the Trigger and Scroller position
-
Scrub و Pin Scrub and Pin
پروژههای اسکرول Scroll Projects
-
پروژه اسکرول چندگانه Multiple Scroll Project
-
پروژه تایملاین تاریخی Historical Timeline Project
-
مقدمه ScrollRocket ScrollRocket introduction
-
جاوااسکریپت ScrollRocket ScrollRocket JavaScript
-
تصاویر قابل اسکرول Scrollable images
https://donyad.com/d/3cabba
Enzo Ustariz
Formateur en Développement Web
Bonjour à toi !
Je m'appelle Enzo Ustariz, tu me connais peut-être sous le pseudo " Le Designer du Web " sur les réseaux، notamment YouTube .
Je suis aussi le createur de l'École du Web.
تاریخچه دوشنبه ?
Je suis développeur Web depuis به علاوه 6 ans , et je me suis rendu compte du manque de contenu sur le web pour nous, فرانسویها.
میتوانید خلاقیت را انتخاب کنید انیمیشنها را با جاوا اسکریپت، طراحی سایتها و برنامههای وب avec React، ou gérer une base de données avec Firebase , c'est un peu la croix et la bannière.
شایستگیهای ، d'outils، de چارچوبها، de زبانها و de کتابخانه ها qu'il y a à maîtriser pour rester compétitif en 2020, je me devais d'agir.
C'est pour ça que je propose ici tous mes cours pour aider un maximum de gens à gagner du temps sur leur apprentissage، et au final qu'ils trouvent rapidement leur place dans le monde professionnel.
Alors fais-toi plaisir و choisis ce dont tu as besoin و ce qui te fais envie parmi le panel de formations que je te propose.
Enzo.
نمایش نظرات