Cara Membuat Animasi Text Terpotong Dengan HTML CSS dan Jquery -

Hallo sahabat Dumet berjumpa lagi di website yang selalu memberikan tips dan trik seputar pembuatan website, pada kesempatan ini saya akan membahas tentang efek animasi text terpotong dengan HTML CSS,baiklah agar tidak terlalu lama bgaimana kalau sahabat mengikut langkah-langkah berikut ini.Cara yang pertama sahabat siapkan terlebih dahulu struktur HTML nya ketikan seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Membuat text terpotong</title>
</head>

<body>
    <div class="container">
      <section class="main">
        <h2 class="cs-text">
          <span class="cs-text-cut">Selamat</span>
          <span class="cs-text-mid">Datang</span>
          <span class="cs-text-cut">Selamat</span>
        </h2>
      </section>
    </div>

Cara yang kedua sahabat tambahkan CSS nya bisa dikuti sintax dibawah ini:

body{
      font-family: sans-serif;
      background-color: #0010f4;
      font-weight: 400;
      font-size: 15px;
      color:#000;
      -webkit-font-smoothing:antialiased;
      overflow: hidden;
      min-height: 100%;
    }

    .container{
      width: 100%;
      position: relative;
    }

    .main{
      width: 90%;
      margin:0 auto;
      position: relative;
      margin-top: 270px;
    }

    .cs-text{
      width: 900px;
      margin:120px auto 30px;
      cursor: default;
    }

    .cs-text > span{
      display: block;
      -webkit-backface-visibility:hidden;
    }

    .cs-text-cut{
      width: 100%;
      height: 90px;
      overflow: hidden;
      transition: all 0.4s ease-in-out;
    }

    .cs-text-cut span{
      display: block;
      line-height: 180px;
      color: rgba(255,255,255,1);
      font-size: 180px;
      text-transform: uppercase;
      text-align: center;
      margin-top:7px;
      font-family: sans-serif;
      text-shadow:7px 2px 0 rgba(255,255,255,0.3);
    }

    .cs-text-cut:last-child span{
      margin-top: -84px;
    }

    .cs-text-mid{
      font-family: sans-serif;
      font-weight: 100;
      text-transform: uppercase;
      font-size: 46px;
      letter-spacing: 70px;
      line-height: 50px;
      text-indent: 20px;
      position: absolute;
      top:50%;
      left:25%;
      margin-top:-25px;
      color: rgba(244, 224, 0,0.5);
      text-shadow: 0 0 0 rgba(255,255,255,0.9);
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.4s ease-in-out 0s;
    }

    .cs-text:hover .cs-text-cut:first-child{
      transform: translateY(-25px);
      opacity: 0.5;
    }

    .cs-text:hover .cs-text-cut:last-child{
      transform: translateY(25px);
      opacity: 0.5;
    }

    .cs-text:hover .cs-text-mid{
      transition-delay: 0.3s;
      transform: scale(1);
      opacity: 0.5;
    }

Jika sudah sahabat bisa menambahkan plugin untuk animasi text silahkan donwload disini ,dan tambahkan script dibawah ini:

<script src="jquery.js"></script>
    <script src="jquery.lettering.js"></script>
    <script>
      $(document).ready(function(){
        $(".cs-text-cut").lettering('words');
      });
    </script>

Nah script diatas bisa sahabat ketikan sebelum tag </body>.

Gambar diatas adalah hasil yang sudah dibuat:

gambar sebelah kiri saat kursor sebelum didekatkan
gambar sebelah kanan setelah kursor didekatkan atau ada efek hover

Demikian pembahasan artikel ini,semoga bermanfaat dan selamat mencoba.

Cara Membuat Animasi Text Terpotong Dengan HTML CSS dan Jquery

Kategori