ساخت افکت شکستن متن یا Fractured text با استفاده از CSS - قسمت 2



visibility  
mode_comment   ۰

در این مطلب میخوام ادامه مراحل مربوط به افکت شکستن متن با استفاده از CSS و کلاسهای کاذب رو به شما آموزش بدم.

ساخت افکت شکستن متن یا Fractured text با استفاده از CSS

در جلسه قبل پایه کار رو ایجاد کردیم و کلاسهای کاذب مورد نظر رو قرار دادیم. کدهایی که برای المنتهای کاذب before و after قرار دادیم بصورت زیر بودند:

خب حالا وارد قسمت جالب این افکت میشیم و میخوایم اون رو بصورت انیمیشنی در بیاریم. چون الان سه لایه بر روی هم قرار گرفتن و المنتهای کاذب نیز بالاتر هستند، میتونیم کارمون رو شروع کنیم. در ابتدا میایم و نصف بالای متن المنت h1 رو با استفاده از المنت کاذب before مخفی میکنیم. از اونجا که پس زمینه سفید هست، پس رنگ متن المنت before رو برابر با سفید قرار میدیم تا نیمه بالایی متن h1 مخفی بشه. همچنین یک text-shadow قرار میدیم تا افکت زیباتری به وجود بیاد. پس کدهای مربوط به المنت کاذب before بصورت زیر میشه:

همونطور که میبینید ارتفاع رو برابر با 50 درصد قرار دادیم تا فقط نیمه بالایی رو پوشش بدیم و همچنین رنگ رو برابر با سفید قرار دادیم.خب تا اینجای کار در خروجی چیزی معلوم نمیشه چون المنت after بر روی همه لایه ها قرار داره و باید اون رو نیز نصف کنیم و بصورت انیمیشنی در جهت افقی حرکت بدیم.

برای المنت کاذب after از کدهای زیر استفاده میکنیم:

همونطور که مشاهده میکنید رنگ متن المنت کاذب after رو سیاه کردیم و ارتفاع اون رو برابر با 49 درصد قرار دادیم. به این دلیل اون رو 50 نکردیم چون میخواستیم خط سفید شکستگی معلوم باشه و حالت بهتری رو به افکت بدهد. بعد از اون یک انیمیشن برای اون تعریف کردیم که بصورت بینهایت تکرار میشه و هر بار 5 ثانیه طول میکشه و المنت after رو 20 پیکسل به سمت چپ حرکت میده و مجددا به سر جای خودش برمیگردونه. با اینکار افکت ما ساخته میشه و میتونیم از اون استفاده کنیم. میبینید که چقد راحت و ساده این کار رو انجام دادیم.

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

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

همچنین شما با استفاده از clip-path میتونین افکت شکسته شده رو بصورت کج و زاویه دار در بیارید و حالت جالب تری رو برای متن اعمال کنید. برای اینکار بصورت زیر عمل میکنیم:

میبینید که از clip-path استفاده کردیم. اگر از کدهای بالا بجای کدهای قبلی استفاده کنیم، متن بصورت کج و زاویه دار شکسته میشه. خروجی بصورت زیر میشه: به همین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.