Cara Membuat Animasi Teks dengan CSS3

27/09/2017    Risman Hakim    911     Website

Ada banyak sekali cara untuk membuat animasi atau hanya sekedar efek-efek pada tampilan web, bisa dengan jQuery, Javascript, dan yang paling sederhana dengan menggunakan CSS3. Animasi bisa kita aplikasikan pada berbagai objek, mulai dari gambar, teks dan lain sebagainya. Nah, pada kasus berikut ini akan saya kasih tahu bagaimana cara membuat animasi teks dengan CSS3. Untuk lebih jelasnya simak langkah-langkahnya berikut ini.

Seperti pada judul diatas, kita akan buat animasi teks, tentu kita akan membuat struktur HTML beserta objek yakni objek teks, berikut kode HTML 5 untuk animasi teks nya.

<body>
  <div id="banner">
    <div><span> CSS3 - HTML5 - Bootstrap 4 - JavaScript - jQuery - AngularJS -</span></div>
    <div><span> CSS3 - HTML5 - Bootstrap 4 - JavaScript - jQuery - AngularJS -</span></div>
  </div>
</body>

Setelah membuat struktur beserta objek untuk animasi nya, selanjutnya adalah membuat animasi teks nya dengan kode CSS3 berikut ini.

body {
    font-family: 'Overpass Mono', monospace;
    font-weight: 300;
    background-color: #fafafa;
  }

  h1 {
    margin: 150px 50px;
    text-align: center;
    font-size: 50px;
  }

  #banner {
    padding-top: 3rem;
    -webkit-perspective: 500px;
    perspective: 500px;
    font-size: 0;
    background-color: #ccc;
  }

  #banner div {
    display: inline-block;
    height: 12rem;
    width: 30rem;
    position: relative;
  }

  #banner div:first-of-type {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotateY(-40deg);
    transform: rotateY(-40deg);
    color: #fff;
  }

  #banner div:last-of-type {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
    color: #fff;
  }

  #banner div {
    font-size: 6rem;
  }

  #banner div span {
    position: absolute;
    width: 900%;
    line-height: 1.4;
  }

  @-webkit-keyframes leftcrawl {
    to {
      -webkit-transform: translateX(-100rem);
      transform: translateX(-100rem);
    }
  }

  @keyframes leftcrawl {
    to {
      -webkit-transform: translateX(-100rem);
      transform: translateX(-100rem);
    }
  }

  @-webkit-keyframes rightcrawl {
    to {
      -webkit-transform: translateX(-130rem);
      transform: translateX(-130rem);
    }
  }

  @keyframes rightcrawl {
    to {
      -webkit-transform: translateX(-130rem);
      transform: translateX(-130rem);
    }
  }

  #banner div:first-of-type span {
    -webkit-transform: translateX(60rem);
    transform: translateX(60rem);
    -webkit-animation: leftcrawl 16s linear infinite;
    animation: leftcrawl 16s linear infinite;
  }

  #banner div:last-of-type span {
    -webkit-transform: translateX(30rem);
    transform: translateX(30rem);
    -webkit-animation: rightcrawl 16s linear infinite;
    animation: rightcrawl 16s linear infinite;
  }

  @media all and (max-width: 993px) {
    #banner {
      -webkit-perspective: none;
      perspective: none;
    }
    #banner div:last-of-type {
      opacity: 0;
      height: 0;
    }
    #banner div:first-of-type {
      width: 80%;
    }
  }
  @media all and (max-width: 780px) {
    #banner {
      padding-top: .8rem;
    }
    #banner div {
      height: 5rem;
      font-size: 2.5rem;
    }
  }

Setelah semua kode HTML dan CSS3 telah diketikan, selanjutnya simpan file nya kemudian buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat sebuah animasi teks sederhana, dimana objek teks akan berjalan secara otomatis.

Nah, itulah tadi tutorial sederhana tentang bagaimana cara membuat animasi teks dengan CSS3. semoga bermanfaat dan selamat mencoba.

Artikel, Web Design, HTML CSS, Bootstrap, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More