آموزش ساخت افکت انیمیشن برای متن در CSS به صورت حرفه‌ای ...
در این مقاله سعی داریم به طور کلی به نحوه ساخت افکت انیمیشن برای متن در CSS بپردازیم.
همانطور که می‌دانید زبان CSS یکی از اصلی‌ترین پایه‌های برای تولید صفحات وب هست.
چه در حوزه فرانت فعالیت دارید و چه بک‌اند باید آشنایی لازم را با این زبان داشته باشید.
از سی‌اس‌اس برای بهتر کردن ظاهر صفحات وب استفاده می‌گردد.
در حقیقت صفحات اچ‌تی‌ام‌ال در حالت دیفالت هم می‌توانند به کاربران نمایش داده شوند ولی کمی ظاهرشان مناسب نیست.
از این رو می‌توانید از CSS برای انجام این کار استفاده کنید.
به طور کلی یادگیری قواعد CSS کار ساده‌ای هست.
مشکلی که اکثر دانشجویان و دانش‌آموزان در حین یادگیری این زبان به آن برخورد می‌کنند تکنیک‌ها هست.
هم‌چنین آن‌ها نمی‌توانند المان‌هایی با شکل‌های مختلف را تولید کنند.
از این رو در این مقاله به طور کلی 1 تمرین بسیار عالی را ارائه کرده‌ایم که با استفاده از آن می‌توانید به راحتی اقدام به تولید 1 افکت انمیشنی در صفحات وب کنید.
پس با ما همراه باشید.
افکت انیمیشن برای متن در CSS در کجا کاربرد دارد؟
قطعا تا به حال به این نوع افکت در صفحات وب برخورد کرده‌اید.
معمولا از این افکت برای وب‌سایت‌های رزومه استفاده می‌گردد.
در این سبک وب‌سایت‌ها معمولا سعی دارند بازدید کنندگان را به وجد بیاورند به همین دلیل هست که از این نوع افکت استفاده می‌کنند.
هم‌چنین شما می‌توانید از این نوع افکت در پروژه‌های مختلفی که مد نظر خودتان هست نیز استفاده کنید.
پروژه‌های مختلفی هست که با توجه به خلاقیت شما می‌توان از این تکنیک در آن‌ها استفاده کرد.
به عنوان مثال در بسیاری از موارد دیده‌ام که در سایت‌های فروشگاهی نیز از این تکنیک استفاده می‌گردد.
آموزش ساخت افکت انیمیشن برای متن در CSS
بهتر هست بدون مقدمه‌چینی بیشتر به سراغ نحوه ساخت این نوع از افکت برویم.
در ابتدا باید کدهای اساسی این نوع از افکت را تولید کنیم تا بعد از آن بتوانید به سراغ بخش‌های اساسی‌تر و CSS بروید.
1.
کدهای پایه‌ای
ابتدا 1 سند Html برای خودتان ایجاد کنید.
فرقی نمی‌کند که نام آن را چه چیزی می‌نویسید ولی باید پسوند آن را htm.
و یا html.
قرار دهید.
ما در این مقاله نام فایل را index.htm قرار داده‌ایم.
هم‌چنین شما باید کدهای پایه‌ای Html که در هر فایل وبی دیده می‌گردد را قرار دهید.
هم‌چنین در ادامه 1 تگ h1 را نیز باز کنید و در آن تگ 1 عبارت مثل Adminesite را تایپ کنید.
این کدها به شکل زیر می باشند.
در این مثال نیازی به تگ متا با مقدار viewport نبود ولی ما به رسم عادت آن را قرار داده‌ایم.
حال باید کدهای CSS را اضافه کنید.
برای این کار می‌توانید به روش‌های مختلفی عمل کنید.
در این مقاله ما کدهای CSS را با استفاده از 1 فایل CSS اضافه کرده‌ایم.
ما نام این فایل را style.css قرار داده‌ایم شما می‌توانید هر نامی برای آن قرار دهید.
خروجی کد بالا به شکل زیر است:
2.
ایجاد فایل CSS
یک فایل در دایرکتوری که فایل html خودتان را ایجاد کرده‌اید ایجاد کنید.
مهم هست که این فایل دقیقا در کنار همان فایل html قرار داشته باشد.
سپس کد زیر را در قسمت head فایل html قرار دهید.
فایل سی‌اس‌اس خودتان را باز کنید و از لینک شدن این دو فایل کاملا مطمئن شوید.
پیشنهادی: آموزش تکنیک Hover Effect در CSS
3.
نوشتن کدهای CSS
حال برای اضافه شدن افکت به صفحه وب مورد نظر کافی هست کدهای مربوط به آن را وارد کنید.
ابتدا position را بر روی relative قرار می‌دهیم.
هم‌چنین webkit-text-stroke را با مقدار 0.3vw و رنگ 383d52 # تنظیم می‌کنیم.
هم‌چنین text-transform را با مقدار uppercase تنظیم می‌کنیم تا حروف به صورت بزرگ در صفحه نمایش داده گردد.
تمامی این خصوصیات را به شکل زیر برای تگ H2 تنظیم می‌کنیم.
h2{ position: relative; font-size: 5rem; -webkit-text-stroke: 0.3vw #383d52; text-transform: uppercase; }4.
نوشتن کدهای مربوط به افکت
برای این بخش نیز باید 1 سری کدهایی بنویسیم.
به فایل Html برمی‌گردیم و در تگ H2 به شکل زیر اتربیوت لازم را اضافه می‌کنیم.
سپس در فایل سی‌اس‌اس با استفاده از before تگ h2 را انتخاب می‌کنیم.
مقدار content را برابر با attr(data-text) قرار می‌دهیم.
هم‌چنین مقدار -webkit-text-stroke را 0vw قرار می‌دهیم.
هم‌چنین رنگ #383d52 را نیز به آن اختصاص می‌دهیم.
1 animation هم ایجاد می‌کنیم که 6 ثانیه طول می‌کشد و به تعداد بی‌نهایت اجرا می‌گردد.
هم‌چنین به -webkit-animation نیز همین خاصیت‌ها را می‌دهیم.
کدهای گفته شده به شکل زیر می باشند.
البته با استفاده از خاصیت border اقدام به ایجاد 1 خط نیز کرده‌ایم که قرار هست بر روی متن مورد نظر ما حرکت کند.
پیشنهادی: معرفی 8 مورد از ترفندهای جستجو در گوگل به صورت کاربردی
5.
ایجاد انیمیشن
ایجاد انیمیشن نیز کار بسیار ساده‌ای هست.
کافیست کدهای زیر را به آن اضافه کنید تا انیمیشن مد نظرتان ایجاد گردد.
در آخر خروجی کار شما به شکل زیر خواهد بود.
چطور کدنویسی با استفاده از Html ,css را یاد بگیریم؟
همانطور که می‌دانید ایجاد افکت انیمیشن برای متن در CSS شما را تبدیل به 1 طراح وب نمی نماید.
شما باید پا را فراتر از این‌ها بگذارید تا تبدیل به 1 طراح وب حرفه‌ای شوید.
برای یادگیری برنامه‌نویسی تحت وب دوره‌های آموزشی بسیار زیادی وجود دارد که می‌توانید از آن‌ها استفاده کنید.
ولی بسیاری از آن‌ها از کیفیت لازم برخوردار نیستند.
از این رو ما در تیم ادمین سایت 1 دوره آموزشی تولید کرده‌ایم که با استفاده از آن می‌توانید به راحتی اقدام به یادگیری کدنویسی با استفاده ازHtml ,css کنید.
برای تهیه این دوره می‌توانید بر روی لینک زیر کلیک کنید.
دوره آموزش HTML و CSSسخن آخر
در این مقاله سعی شد به طور کلی به نحوه ساخت افکت انیمیشن برای متن در CSS پرداخته گردد.
برای انجام این کار شما می‌توانید به راحتی از کدهای گفته شد استفاده کنید ولی سعی کنید به طور کلی کدها را خودتان یاد بگیرید نه این که از جای دیگری کپی کنید.
اگر از مطالعه این مقاله لذت بردید در بخش نظرات انتقادها و پیشنهادهای خودتان را با ما در میان بگذارید.
شاد و موفق و پیروز باشید.
نوشته آموزش ساخت افکت انیمیشن برای متن در CSS به صورت حرفه‌ای اولین بار در ادمین سایت.
شما می توانید 30 تا 50 میلیون تومان در ماه، از اینترنت درآمد داشته باشید و شغل رویایی خودتان را بسازید ...
برای کسب اطلاعات بیشتر لطفا بر روی بنر زیر کلیک بفرمایید :
