برای مشاهده‌ی ویدیو لطفاً آن را خریداری کنید.

سرفصل ها

بخش 1 : افکت خلاقانه‌ی عکس شماره یک
00:00:05
Reply Icon

یادداشتی وجود ندارد.

منابع و متریال آموزشی

ندارد.

Video Player is loading.
cvt-37-39 - creative image effect 1.mp4

افکت خلاقانه‌ی عکس شماره یک

Creative Image Effect 1 Final

دوره: طراحی صد پروژه‌ی انیمیشن و افکت‌ حرکتی با CSS

در این قسمت از دوره‌ی آموزشی، عکسی را در صفحه ایجاد می‌کنیم که با رفتن موس بر روی آن، افکت شناوری رخ بدهد. این افکت بدین شکل است که با رفتن موس بر روی آن، عکس همزمان دوران می‌کند و بزرگ‌تر می‌شود و نوشته‌ی موردنظر هم با پس‌زمینه‌ی نیمه‌شفاف سیاه به تدریج ظاهر می‌شود. برای اینکه نوشته در مرکز عکس قرار بگیرد از flexbox کمک می‌گیریم که یکی از ویژگی‌های جدید آن flex-direction است که در این درس بررسی می‌شود. ویژگی‌ها و توابع مختلفی در این درس به کار برده می‌شوند از جمله: ویژگی opacity  برای ظاهر شدن تدریجی پس‌زمینه و -نوشته، تابع rotate برای دوران عکس با زاویه‌ی مشخص و تابع scale برای بزرگ‌تر شدن عکس.

level icon سطح : مقدماتی تا متوسطه
typeIcon نوع : با زیرنویس