در این مقاله سعی داریم به طور کلی به نحوه ساخت افکت انیمیشن برای متن در CSS بپردازیم. همانطور که می‌دانید زبان CSS یکی از اصلی‌ترین پایه‌های برای تولید صفحات وب است. چه در حوزه فرانت فعالیت دارید و چه بک‌اند باید آشنایی لازم را با این زبان داشته باشید.
از سی‌اس‌اس برای بهتر کردن ظاهر صفحات وب استفاده می‌شود. در حقیقت صفحات اچ‌تی‌ام‌ال در حالت دیفالت هم می‌توانند به کاربران نمایش داده شوند ولی کمی ظاهرشان مناسب نیست. از این رو می‌توانید از CSS برای انجام این کار استفاده کنید. به طور کلی یادگیری قواعد CSS کار ساده‌ای است. مشکلی که اکثر دانشجویان و دانش‌آموزان در حین یادگیری این زبان به آن برخورد می‌کنند تکنیک‌ها است. هم‌چنین آن‌ها نمی‌توانند المان‌هایی با شکل‌های مختلف را تولید کنند.
از این رو در این مقاله به طور کلی یک تمرین بسیار عالی را ارائه کرده‌ایم که با استفاده از آن می‌توانید به راحتی اقدام به تولید یک افکت انمیشنی در صفحات وب کنید. پس با ما همراه باشید.
افکت انیمیشن برای متن در CSS در کجا کاربرد دارد؟
قطعا تا به حال به این نوع افکت در صفحات وب برخورد کرده‌اید. معمولا از این افکت برای وب‌سایت‌های رزومه استفاده می‌شود. در این سبک وب‌سایت‌ها معمولا سعی دارند بازدید کنندگان را به وجد بیاورند به همین دلیل است که از این نوع افکت استفاده می‌کنند.
هم‌چنین شما می‌توانید از این نوع افکت در پروژه‌های مختلفی که مد نظر خودتان است نیز استفاده کنید. پروژه‌های مختلفی است که با توجه به خلاقیت شما می‌توان از این تکنیک در آن‌ها استفاده کرد. به عنوان مثال در بسیاری از موارد دیده‌ام که در سایت‌های فروشگاهی نیز از این تکنیک استفاده می‌شود.
آموزش ساخت افکت انیمیشن برای متن در CSS
بهتر است بدون مقدمه‌چینی بیشتر به سراغ نحوه ساخت این نوع از افکت برویم. در ابتدا باید کدهای اساسی این نوع از افکت را تولید کنیم تا بعد از آن بتوانید به سراغ بخش‌های اساسی‌تر و CSS بروید.
1. کدهای پایه‌ای
ابتدا یک سند Html برای خودتان ایجاد کنید. فرقی نمیکند که نام آن را چه چیزی می‌نویسید ولی باید پسوند آن را htm. و یا html. قرار دهید. ما در این مقاله نام فایل را index.htm قرار داده‌ایم. هم‌چنین شما باید کدهای پایه‌ای Html که در هر فایل وبی دیده می‌شود را قرار دهید.
هم‌چنین در ادامه یک تگ h1 را نیز باز کنید و در آن تگ یک عبارت مانند Adminesite را تایپ کنید. این کدها به شکل زیر هستند.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Effect</title> </head> <body> <h2> Adminesite </h2> </body> </html>
در این مثال نیازی به تگ متا با مقدار viewport نبود ولی ما به رسم عادت آن را قرار داده‌ایم. حال باید کدهای CSS را اضافه کنید. برای این کار می‌توانید به روش‌های مختلفی عمل کنید. در این مقاله ما کدهای CSS را با استفاده از یک فایل CSS اضافه کرده‌ایم. ما نام این فایل را style.css قرار داده‌ایم شما می‌توانید هر نامی برای آن قرار دهید.
خروجی کد بالا به شکل زیر است:
2. ایجاد فایل CSS
یک فایل در دایرکتوری که فایل html خودتان را ایجاد کرده‌اید ایجاد کنید. مهم است که این فایل دقیقا در کنار همان فایل html قرار داشته باشد. سپس کد زیر را در قسمت head فایل html قرار دهید.
<link rel="stylesheet" href="style.css">
فایل سی‌اس‌اس خودتان را باز کنید و از لینک شدن این دو فایل کاملا مطمئن شوید.
پیشنهادی: آموزش تکنیک 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. نوشتن کدهای مربوط به افکت
برای این بخش نیز باید یک سری کدهایی بنویسیم. به فایل Html برمی‌گردیم و در تگ H2 به شکل زیر اتربیوت لازم را اضافه می‌کنیم.
<h2 data-text="Adminesite">
سپس در فایل سی‌اس‌اس با استفاده از before تگ h2 را انتخاب می‌کنیم. مقدار content را برابر با attr(data-text) قرار می‌دهیم. هم‌چنین مقدار -webkit-text-stroke را 0vw قرار می‌دهیم. هم‌چنین رنگ #383d52 را نیز به آن اختصاص می‌دهیم. یک animation هم ایجاد می‌کنیم که 6 ثانیه طول می‌کشد و به تعداد بی‌نهایت اجرا می‌شود. هم‌چنین به -webkit-animation نیز همین خاصیت‌ها را می‌دهیم. کدهای گفته شده به شکل زیر هستند.
h2::before{ content: attr(data-text); position: absolute; top: 0; left: 0; width: 8%; height: 100%; color: #4fed51; -webkit-text-stroke: 0vw #383d52; border-right: 2px solid #4fed51; overflow: hidden; animation: animate 6s linear infinite; -webkit-animation: animate 6s linear infinite; }
البته با استفاده از خاصیت border اقدام به ایجاد یک خط نیز کرده‌ایم که قرار است بر روی متن مورد نظر ما حرکت کند.
پیشنهادی: معرفی 8 مورد از ترفندهای جستجو در گوگل به صورت کاربردی
5. ایجاد انیمیشن
ایجاد انیمیشن نیز کار بسیار ساده‌ای است. کافیست کدهای زیر را به آن اضافه کنید تا انیمیشن مد نظرتان ایجاد شود.
@keyframes animate{ 0%{ width: 0%; } 70%{ width: 100%; } }
در آخر خروجی کار شما به شکل زیر خواهد بود.
چطور کدنویسی با استفاده از Html ,css را یاد بگیریم؟
همانطور که می‌دانید ایجاد افکت انیمیشن برای متن در CSS شما را تبدیل به یک طراح وب نمیکند. شما باید پا را فراتر از این‌ها بگذارید تا تبدیل به یک طراح وب حرفه‌ای شوید. برای یادگیری برنامه‌نویسی تحت وب دوره‌های آموزشی بسیار زیادی وجود دارد که می‌توانید از آن‌ها استفاده کنید. اما بسیاری از آن‌ها از کیفیت لازم برخوردار نیستند. از این رو ما در تیم ادمین سایت یک دوره آموزشی تولید کرده‌ایم که با استفاده از آن می‌توانید به راحتی اقدام به یادگیری کدنویسی با استفاده ازHtml ,css کنید.
برای تهیه این دوره می‌توانید بر روی لینک زیر کلیک کنید.
دوره آموزش HTML و CSS
سخن آخر
در این مقاله سعی شد به طور کلی به نحوه ساخت افکت انیمیشن برای متن در CSS پرداخته شود. برای انجام این کار شما می‌توانید به راحتی از کدهای گفته شد استفاده کنید ولی سعی کنید به طور کلی کدها را خودتان یاد بگیرید نه این که از جای دیگری کپی کنید. اگر از مطالعه این مقاله لذت بردید در بخش نظرات انتقادها و پیشنهادهای خودتان را با ما در میان بگذارید. شاد و موفق و پیروز باشید.
نوشته آموزش ساخت افکت انیمیشن برای متن در CSS به صورت حرفه‌ای اولین بار در ادمین سایت. پدیدار شد.
بدون دیدگاه