شما می توانید برخی از جلوه های زیبا و خیره کننده متن را با CSS و چند خط جاوا اسکریپت ایجاد کنید. این اثرات از انیمیشن های صفحه نمایش متن به چرخش های سه بعدی یا هر چیز دیگری که می توانید تصور کنید نمایش داده می شود. و در این پست 10 مورد انیمیشن متن را نشان می دهیم که نشان می دهد چه کاری می توانید با کمی متن و کد CSS انجام دهید.
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
این اثر انیمیشن توسط رابین ترور به سبک بسیاری از فیلم ها و بازی های ویدئویی ایجاد شده است. حروف بر روی یک اثر 3D پیشرو با استفاده از سایه متن CSS3 همراه با یک قطب مورب نمایش داده می شود. سبک انیمیشن محو شدن در فیلم های کلاسیک از دهه 1930 با همان متن کج شده را به یاد می آورد. همه چیز از طریق CSS کنترل می شود، اما دکمه "راه اندازی مجدد" با استفاده از JavaScript ساخته شده است. به این ترتیب شما می توانید چندین بار انیمیشن را بازدید کنید.
See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
ایجاد یک متن خراب شکسته یک کار ساده با ابزارهایی مانند After Effects است، اما ایجاد یک متن متزلزل با کد بسیار سخت تر است و این اثر توسط Arsen Zbidniakov بسیار چشمگیر است. متن در واقع با استفاده از شکل های SVG ساخته شده است که باعث می شود روند انیمیشن کمی ساده تر شود. این همچنین بدان معنی است که شما نمیتوانید متن را مانند حالت عادی انتخاب کنید، کپی کنید یا با آن ارتباط برقرار کنید. اما شما می توانید یک اثر مشابه را به سایت خود اضافه کنید اگر از آن برای یک آرم یا عنصر صفحه دیگری غیر تعاملی استفاده کنید.
See the Pen CSS Text animation by Mamun Khandaker (@kh-mamun) on CodePen.
یک انیمیشن زیبا برای طراحی سایت بادکمه تکرار در رنگهای مختلف می باشد.
See the Pen Typography Animation by Georgi Nikoloff (@gbnikolov) on CodePen.
این اثر پیکسل انیمیشن منحصر به فرد قطعا عجیب و غریب و زیبا است. این اثر بیشتر به جاوا اسکریپت متکی است و توسط Georgi Nikoloff به عنوان راهی برای بازی با عنصر HTML5 canvas ایجاد شده است. از Noto Serif به عنوان یک پایگاه فونت استفاده می کند. جاوا اسکریپت حروف را به نقاط کوچکتر تقسیم می کند و این اساس انیمیشن است.
See the Pen Simple Typing Carousel by Gregory Schier (@gschier) on CodePen.
این انیمیشن به شکلی است که انگار کسی در حال تایپ کردن است.
See the Pen Tyger Tyger by Joseph Martucci (@jjmartucci) on CodePen.
کلمات کلیدی از شعر ویلیام بلیک "The Tyger"، این انیمیشن بسیار منحصر به فرد توسط جوزف مارتوچی واقعا توجه شما را جذب می کند. تمرکز این اثر در مورد محتوای زیاد نیست، بلکه بر روی سبک و انیمیشن های تایپوگرافی است. هر "بخش" متن دارای سبک خاص خود با خطوط متن و جلوه های درخشان است. این مثال خوبی است که شما می توانید متن صفحه را به صورت یکپارچه با استفاده از setTimeout بسازید.
See the Pen Text animation with Snap SVG by alexis blondin (@alticreation) on CodePen.
کتابخانه snap.svg به شما کمک خواهد کرد تا انیمیشنهای زیبایی را بسازید.
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
این متن متحرک مانند انیمیشن تایپی است با این تفاوت که متون را به صورت چرخشی نشان میدهد.
See the Pen Unbreakable Kimmie Schmidt by groovc (@groovc) on CodePen.
یک متن متحرک زیبای دیگر را در بالا مشاهده می کنید که طراحی سایت شما را زیبا می کند.
See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.
این اثر از stork و svg استفاده کرده است.
