افکت های الهام بخش برای سبک دهی متون

امروز ما میخوایم با ترکیب  Style text و Hover ثار خلاقی خلق کنیم که شاید بتونه الهام بخش شما باشه ، در تعدادی از این آثار از متدهای جدیدی به اسم SVG و  Canvas استفاده شده . همیشه اینطور بوده که وقتی به متن هاتون انیمیشن ها و افکت های خاصی اضافه میکنید ، مخصوصا زمانی که اون یه لینک باشه ، شما یه لوگو typographic و یا متن فوق العاده میسازین که واقعا هیچ محدودیتی در ایجاد آثار خلاقانه وجود نداره . بنابراین ما امروز تصمیم گرفیتم که یه ترکیب فوق العاده از Style text و Hover بهتون تحویل بدیم که که واقعا یه چیز خلاقانه از آب در میاد و امیدوارم از اونها لذت ببرید و الهام بگیرید .

من هر کدوم از این افکت ها رو برای یه لینک بصورت fullscreen در دمو قرار دادم بطوری که شما به راحتی میتونید افکت ها رو با Hover کردن با جزئیات کامل تماشا کنید . 

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

تمام افکت ها با ترکیب  Style text و Hover و همینطور با استفاده از تکنیک های جدید  SVG و  Canvas آماده شده ان که اسکریپت باحال  “jolt” که توسط Tiffany Rayside ساخته شده چاشنی کاره و همینطور برای افکت دهی از شبه کلاس های ::before و ::after برای هر لینک بهره بده شده . 

خوب بیاید به یکی از این افکت ها نگاه کنیم :

برای نمایش هر کدوم از این افکت ها بر روی لینکمون ما از  data attribute برای کد html مون بصورت زیر استفاده میکنیم .

<a class="link link--kukuri" href="#">Kukuri</a>

استایل مشترکی که در تمام لینک ها استفاده میشه بصورت زیره : 

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}

اگه شما یه نگاه دقیق به افکت Kukuri که در بالا نشون دادیم بکنید ، متوجه میشید وقتی روی لینک Hover میکنید یه نوار نازک از سمت چپ به راست میره . این نوار زمانی که در حال عبوره یه رنگ رو همراه خوش برای لینکمون میکشه که اون رنگ با استفاده از شبه کلاسه ::before ساخته میشه . این انقتال ها با استفاده از خاصیت transition در css اتفاق میفته . که میتونید کدشو در زیر بببینید .

.link--kukuri {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #b2b0a9;
}

.link--kukuri:hover {
	color: #b2b0a9;
}

.link--kukuri::after {
	content: '';
	position: absolute;gi
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #F9F9F9;
	transform: translate3d(-100%,0,0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
	transform: translate3d(100%,0,0);
}

.link--kukuri::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
	width: 100%;
}

امیدوارم این افکت ها مورد استفادتون قرار بگیره .