img

ایجاد انیمیشن محوسازی متن با CSS

/
/
/

استفاده از گزینشگر hover در CSS برای فعال کردن یک تغییر شکل متن متحرک به صورت یک محو شوندگی مواج

۱- قالب سند HTML
پروژه را با ساخت یک سند HTML آغاز کنید. اولین قدم، نشانه گذاری لازم برای ساختار کلی سند را ایجاد می‌کند که محتوای قابل دیدن برای مخاطب را در خود جای می‌دهد. این محتوا در قدم دوم تعریف شده است.
قسمت سر(head) فراداده توضیحی و پیوندهای منابع را در خود جای می‌دهد.

<!DOCTYPE html>
<html>
<head>
<title>Text Haze</title>
<link rel=”stylesheet” type=”text/css”
Href=”styles.css” />
</head>
<body>
*** STEP 2 HERE
</body>
</html>

 

۲- محتوای بدنه(body)
زمانی که ساختار صفحه جای گذاری شد، وقت آن است بر روی تولید محتوای صفحه تمرکز شود. محتوای مثال ما المان‌های متنی جداگانه ای را به وسیله کلاس ‘haze’ با جلوه مه آسا تزیین می‌کند.
استفاده از کلاس ‘haze’ این مزیت را ایجاد می‌کند که بتوانیم بدون پیچده کردن غیرضروری CSS، مکان اجرای جلوه مورد نظر را تعیین کنیم.

<h1 class=’haze’>Haze Title</h1>
<p>Normal text.</p>
<p class=”haze”>More haze text.</p>

۳- ایجاد CSS
اکنون که محتوای HTML کامل شده است، یک فایل جدید با نام ‘styles.css’ ایجاد نمایید تا تعاریف CSS را در آن بنویسید.
این فایل مسئولیت تعریف قوانینی(rule) را دارد که سر و شکل و ظاهر صفحه را تعیین می‌کنند. این قدم مقدماتی سند HTML و ظرف بدنه آن را (body) تعریف می‌کند که شامل پدید آوردن پس زمینه ای تمام صفحه و سیاه رنگ و فونت پیش فرض Helvetica می‌شود.

html, body {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff;
}

۴٫ تنظیمات تغییر شکل
جلوه متنی مه آسا، در درجه اول از استایل text-shadow بهره می‌برد. برای اینکه جلوه خودش را نشان دهد، این مشخصه باید به گونه ای به نظر برسد که هنگام تغییر دارد از حالتی به حالتی دیگر انتقال می‌یابد. مثال ما این متحرک سازی را به طول مدت ۱٫۵ ثانیه تعیین می‌کند، اما شما مختارید که این پویانمایی را سریع تر یا کندتر سازید.

.haze {
Transition: text-shadow 1.5s;
}

۵- تنظیمات شناوری اشاره گر
المان‌های مه آسای متحرک، هنگامی که کاربر اشاره گر را بر روی آنها شناور می‌کند فعال می‌شوند و خودنمایی می‌کنند.
CSS این وضعیت را با استفاده از گزینشگر hover تشخیص می‌دهد. مرحله کنونی، تغییرات آیتم‌های متنی هنگام تشخیص شناوری نشانه گر بر روی آنها را تعریف می‌کند.
یک پویانمایی ۳ ثانیه ای اجرا می‌شود، همراه با تنظیماتی برای سایه متن و تنظیماتی جهت متن اصلی تا به گونه ای شفاف درآید. جلوه مه آسا با نمایش سایه ای سفید رنگ از متن به اجرا در می‌آید.

.haze:hover {
animation: hazeAnim 3s linear infinite;
text-shadow: 0 0 15px rgba(255,255,255, 0.5);
color: transparent;
}

۶- مرحله پایانی متحرک سازی
اگرچه جلوه مه آسا عمتدا از اطلاق تعاریف انتقال بر مشخصه text-shadow ناشی می‌شود که در مرحله قبلی شاهدش بودیم، متحرک سازی دیگری نیز در این امر دخیل است.
نقش این متحرک سازی کشش افقی متن با استفاده از scaleY به اندازه دو برابر ارتفاع معمولی در ۵۰% مدت متحرک سازی می‌باشد. ارتفاع متن در ابتدا(۰) و انتهای(۱۰۰%) مدت متحرک سازی به اندازه معمولی باز می‌گردد.

@keyframes hazeAnim {
۰, ۱۰۰% {transform: scaleY(1);}
۵۰% {transform: scaleY(2);}
}

کاربرد محور طراحی کنید
به یاد داشته باشید که هدف از نوشته شدن متن، خوانده شدن است. توجه کنید که چگونه می‌شود از این جلوه برای جلب توجه استفاده نمود بدون اینکه خوانا بودن متن را زیر سایه ببرد.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text