شما می توانید با استفاده از سی اس اس و کمی جاوا اسکریپت انیمیشن های متنی زیبایی بسازید. این انیمیشن ها و جلوه ها را می توانید در هر حالتی مانند انیمیشن دو بعدی یا سه بعدی خلق نمایید. من در این پست می خواهم ۱۰ تا از بهترین انیمیشن های متنی که از سراسر وب پیدا کرده ام را به شما نشان دهم. شما هم می توانید با کمی کار کردن روی سی اس اس و جاوا اسکریپت برای خودتان یکی از این طرح ها را خلق کنید.
اولین انیمیشن متنی را که می خواهم معرفی کنم، انیمیشنی است که مخصوص متون عنوان استفاده می شود، این انیمیشن توسط Robin Treur ساخته شده و بیشتر از فیلم های قدیمی و بازی های ویدیویی الهام گرفته است. در این انیمیشن متنی یک حالت سه بعدی ساده که توسط دستورهای مربوط به text-shadow در سی اس اس ساخته می شود، استفاده شده است. همچنین افکت نمایشی که متن با آن ظاهر می شود ما را تا حدی به فیلم های دهه ۱۹۳۰ ارجاع می دهد. تمام چیزهایی که در این انیمیشن می بینید توسط کدهای سی اس اس ساخته شده است، اما برای دکمه Restart که کدها را دوباره اجرا می کند کمی از جاوا اسکریپت استفاده شده است. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
۲. Shattering
شاید ساختن متنی که از شکستگی ها ایجاد می شود و دوباره به قطعات شکسته ای تبدیل می شود با ابزاری چون آفترافکت ساده باشد، اما انجام این کار با استفاده از کدنویسی واقعا کار دشواری است. این انیمیشن متنی را فردی به اسم Arsen Zbidniakov ساخته است و واقعا کاری عالی است. البته نکته بسیار مهمی که داخل این انیمیشن متنی وجود دارد استفاده کردن از اشکال SVG است، همین دلیل باعث می شود که ساختن آن به مراتب راحت تر از استفاده کردن متن ساده است. اینگونه طراحی باعث می شود که کاربر نتواند به شکل عادی با متن ارتباط برقرار کند، برای مثال نمی توان آن را انتخاب و یا کپی کرد. استفاده کردن از این انیمیشن متنی برای قسمت لوگوی وبسایت بسیار معقول و زیبا است. چرا که لوگو قسمتی از وب است که احتیاجی به کپی کردن یا انتخاب کردن آن توسط کاربر نیست. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
توسعه دهنده ای به اسم Mamun Khandaker مجموعه ای از انیمیشن های متنی را در یک پروژه جمع آوری کرده است. با جستجو در بین این انیمیشن ها می توانید یکی از آنها را انتخاب کنید و در کارتان از آن استفاده کنید. این انیمیشن متنی در اصل مختص به صفحات فرود هستند و برای جلب کردن توجه کاربری به یک نقطه از صفحه بسیار کارآمد است. تمام این انیمیشن ها ۱۰۰ درصد از سی اس اس ساخته شده است و با تمام مرورگر ها سازگاری دارد. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
این یک جلوه یا انیمیشن یونیک و تک است. این طرح بیشتر از کدهای جاوا اسکریپت تشکیل شده است و توسعه دهنده آن هم شخصی به اسم Georgi Nikoloff است. این انیمیشن بیشتر شبیه بازی کردن با قدرت HTML5 , Canvas است. در این طرح از فونت Noto Serif استفاده شده است، همچنین برای تغییر مکان نقطه ها هم از جاوا اسکریپت استفاده می شود. دقیقا نمی شود گفت که این انیمیشن در کجای یک وبسایت بهتر است قرار گیرد، اما در کل چیزی زیبا است. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
این جلوه یکی از پر کاربردترین جلوه های انیمیشنی در سایت های مختلف است. به خصوص در وبسایت های نمونه کار و یا آژانس های مختلف. این جلوه بیشتر برای سربرگ وبسایت ها کاربرد دارد و چیزی شبیه به یک پردازنده متن را فراهم می آورد. همه چیزهای مورد نظر شما در یک المنت span قرار گرفته شده است و بقیه قسمت های آن از سی اس اس و جاوا اسکریپت تشکیل می شود. بیشتر اوقات استفاده ای که ما از این انیمیشن را دیده ایم در نوشتن لیست کارهایی که وبسایت انجام می دهد، بوده است و یا مواقعی که شما می خواهید دیدگاهی که مشتری برای شرکت شما گذاشته را به نمایش بگذارید. در کل می توان گفت که انیمیشنی جذاب و جالب است اما قابلیت readability یک برگه را پایین می آورد، با این حال چیزی است که جذابیت را به صفحات شما می دهد. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
۶. Tyger Tyger
در این انیمیشن از متن های درخشانی استفاده می شود که با آن می توانید بیشترین توجه کاربر را به متن خود معطوف کنید. البته شاید این انیمیشن واقعا آنچنان کاربردی را برای شما ایفا نکند، اما به هر حال این انیمیشنی خفن و زیبا است. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
۷. Snap SVG
این انیمیشن با استفاده از کتابخانه متن باز Snap.svg ساخته شده است. این کتابخانه به شما امکان آن را فراهم می سازد که با استفاده از کدهای بسیار کمی بتوانید تصاویر SVG با کیفیت بالایی را خلق کنید. استفاده از این کتابخانه بسیار ساده تر و راحت تر از آن خواهد بود که برای ساختن چنین تصویری از ابزاری مانند Illustrator استفاده کنید. تمام کاراکترهای موجود در این انیمیشن از یک موتور جاوا اسکریپتی رد می شوند و حالت های مختلفی را به صورت تصادفی برای شما انتخاب می کند. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
یکی دیگر از انیمیشن های متنی پرکاربردی که من آن را در اینترنت می بینیم Bracket Animation ها هستند. در این حالت یک متن داخل دو تا پرانتز قرار می گیرید و به صورت چرخش رو به بالا متن تغییر می کند. این یک نمونه بارز از انیمیشن ساده و جذابی است که می شود آن را در وبسایت خود استفاده کنید. بیشتر کارهای این انیمیشن را کدهای سی اس اس برای شما به اجرا در می آورند. اگر می خواهید متن های مختلفی را در حالت یک الگوی خاص به نمایش بگذارید پیشنهاد می کنم از این طرح استفاده کنید. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
این سری از انیمیشن ها با الهام از شبکه خانگی نتفلیکس ساخته شده است. تمام چیزی را که شما در اینجا می بینید چند خط اچ تی ام ال و جاوا اسکریپت و مقدار زیادی سی اس اس است. انیمیشنی بسیار ساده و زیبا است که شما می توانید در صفحات خانگی خود از آن بهره بگیرید. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
۱۰. Filling SVG Text
در پایان از انیمیشنی صحبت می کنیم که به صورت کامل از SVG بهره گرفته و زیبایی مدرنی با خود به همراه دارد. در این انیمیشن از خاصیت stroke سی اس اس استفاده می شود. جدای از آنکه در این انیمیشن از SVG استفاده شده است اما امکان انتخاب کردن متن و کپی کردن آن امکان پذیر است. برای دیدن کدهای این انیمیشن متنی می توانید به این صفحه مراجعه کنید.
انیمیشن های اسم برده، از بهترین کارهای توسعه دهندگان مختلف بودند. شاید شما نتوانید برای هر کدام از این ها در وبسایت خود مکان مناسبی را پیدا کنید، اما به احتمال زیاد هر کدام از این ها در نوع خود هنرنمایی از کدها هستند.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید