آموزش GSAP توسعه وب و تسلط بر انیمیشن

سرفصل ها و درس ها

اصول HTML و عناصر صفحه HTML Fundamentals and Page Elements

• ایجاد فایل های HTML Creating HTML Files

• برچسب ها و ساختار صفحه HTML Tags & HTML Page Structure

• سرفصل ها و متون Headings and Texts

• درون خطی، عناصر و پیوندهای سطح بلوک Inline, Block Level Elements and Links

• ویژگی های فیلد: پیام، ایمیل، سن و تاریخ Field Attributes: Message, Email, Age and Date

• دکمه ها، آپلود تصویر و اندازه Buttons, Image Upload and Sizing

• نقل قول ها، نقل قول ها و اختصارات Quotations, Citation and Abbreviations

• تغییر صفحه Page Switching

CSS Project Setup and Styling Essentials CSS Project Setup and Styling Essentials

• یک پروژه CSS راه اندازی کنید Set Up a CSS Project

• رنگ ها را با CSS تنظیم کنید Set Colours with CSS

• فونت های خود را با CSS طراحی کنید Design Your Fonts with CSS

• شناسه ها و کانتینرها IDs and Containers

• حاشیه جعبه، حاشیه و بالشتک Box Margin, Border and Padding

• ایجاد فرم ها با CSS Creating Forms with CSS

• اولین صفحه CSS خود را ایجاد کنید Create Your First CSS Page

مبانی جاوا اسکریپت و مفاهیم برنامه نویسی JavaScript Fundamentals and Programming Concepts

• انواع داده ها و بیانیه های کنسول Data Types and Console Statements

• روش ها با آرایه ها Methods with Arrays

• حلقه ها: for، while، if و switch Loops: for, while, if and switch

• توابع و کلاس ها Functions and Classes

• از عناصر HTML در جاوا اسکریپت استفاده کنید Use HTML Elements in JavaScript

تسلط بر انیمیشن GSAP در HTML و CSS Mastering GSAP Animation in HTML and CSS

• مقدمه ای بر GSAP Introduction to GSAP

• یک انیمیشن ساده GSAP A Simple GSAP Animation

• راه اندازی پروژه HTML و CSS HTML and CSS Project Set Up

• جنبش GSAP GSAP Movement

• انواع پرش Bouncing Types

• اضافه کردن شی دوم Adding Second Object

• ظاهر GSAP GSAP Appearance

• همگام سازی چند شی Multiple Object Synchronization

• همگام سازی های پیشرفته Advanced Synchronizations

پروژه طراحی وب: برگ ها و پس زمینه تعاملی Web Design Project: Interactive Leaves and Background

• راه اندازی و بررسی اجمالی پروژه Project Set Up and Overview

• طراحی برگ های متحرک تصادفی Design Randomly Movable Leaves

• اندازه برگ Leaves Size

• برگ های درون خطی Inline Leaves

• ظاهر مکان نما Cursor Appearance

• رسم SVG Drawing an SVG