Cara Membuat Animasi Teks dengan CSS3

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.

27 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat