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

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۳۰ بهمن ۱۳۹۶

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

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

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

h1::before, h1::after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  overflow: hidden;
}

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

h1::before {
  height: 50%;
  color: white;
  text-shadow: 3px -2px 5px white, -3px 3px 4px white;
}

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

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

h1::after {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-animation: fracture 5s infinite ease;
          animation: fracture 5s infinite ease;
  height: 49%;
  color: black;
}

@-webkit-keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}

@keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}

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

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

html {
  height: 100vh;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
}

h1 {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  margin: 0;
  font-size: 10vw;
  font-weight: 900;
  text-transform: uppercase;
  color: black;
}

h1::before, h1::after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  overflow: hidden;
}

h1::before {
  height: 50%;
  color: white;
  text-shadow: 3px -2px 5px white, -3px 3px 4px white;
}

h1::after {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-animation: fracture 5s infinite ease;
          animation: fracture 5s infinite ease;
  height: 49%;
  color: black;
}

@-webkit-keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}

@keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}

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

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

h1:before {
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 39%, 0 67%);
          clip-path: polygon(0 0, 100% 0%, 100% 39%, 0 67%);
  color: white;
  text-shadow: 3px -2px 5px white, -3px 3px 4px white;
  background: white;
}
h1:after {
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 37%, 0 65%);
          clip-path: polygon(0 0, 100% 0%, 100% 37%, 0 65%);
  color: black;
  -webkit-animation: fracture 5s infinite ease;
          animation: fracture 5s infinite ease;
}

@-webkit-keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translate(-20px, 2%);
            transform: translate(-20px, 2%);
  }
}

@keyframes fracture {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translate(-20px, 2%);
            transform: translate(-20px, 2%);
  }
}

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

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :