آموزش ایجاد یک بنر تبلیغاتی HTML5 با GreenSock (GSAP)

مقدمه Introduction

• معرفی این دوره Introduction to this course

• درباره پرونده های تمرینی About the exercise files

• در حال بارگیری GSAP Downloading GSAP

1. تنظیم طرح بندی آگهی با HTML و CSS 1. Setting Up the Ad Layout with HTML and CSS

• ایجاد لینک اصلی و کانتینر تبلیغاتی Creating the main ad link and container

• اضافه کردن ابرهای پس زمینه Adding the background clouds

• اضافه کردن عکس و عناوین Adding the photo and headlines

• اضافه کردن عناصر طراحی باقی مانده Adding the remaining design elements

• پیوند دادن به پرونده اصلی JavaScript GSAP Linking the main GSAP JavaScript file

2. انیمیشن کردن آگهی با GSAP 2. Animating the Ad with GSAP

• ایجاد اولین انیمیشن Creating the first animations

• انیمیشن نشانگر و سایه Animating the marker and shadow

• متحرک کردن تخته موج سواری Animating the surfboard

• حرکت و حلقه زدن ابرها Moving and looping the clouds

• تنظیم آگهی در بارگذاری محو می شود Setting the ad to fade in on load

• متحرک کردن حروف یک عنوان Animating the letters of a headline

• با استفاده از پرونده های فردی از سیستم عامل GSAP Using individual files of the GSAP platform