Membuat 3D Tag Marquee

Selamat Datang di Dumet School. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat 3d tag marquee pada html, tag marquee pada HTML sendiri merupakan tag yang digunakan untuk efek teks yang dapat bergerak secara ke kanan-kiri atau ke atas-kebawah.Â Bagaimana cara membuatnya teman-teman dapat mengikutin langkah-langkah berikut ini :

Langkah pertama siapkan struktur HTML terlebih dahulu ketikan seperti script dibawah :

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat 3d marquee</title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <div class="look eye1">
      <span>SELAMAT&nbsp;PAGI&nbsp;JUARA</span>
    </div>
    <div class="look eye2">
      <span>SELAMAT&nbsp;PAGI&nbsp;JUARA</span>
    </div>
  </div>
</body>
</html>

Langkah berikutnya tambahkan Style CSS untuk mempercantik design atau tampilannya ketikan script berikut ini:

<style>
    body{
      margin:0;
      padding:0;
      font-family: 'Bungee Inline', cursive;
      background:#f6ff00;
    }

    .wrapper{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
      width: 1300px;
      height: 150px;
    }

    .wrapper .look{
      position: absolute;
      width: 608px;
      height: 150px;
      font-size: 60px;
      text-align: center;
      line-height: 150px;
      overflow: hidden;
    }

    .wrapper .look span{
      width: 100%;
      height: 100%;
      display: block;
      transition: .5s;
    }

    .wrapper .look.eye1{
      background-image: url(hd.jpg);
      color: #ff0;
      transform-origin: left;
      left:0;
      transform: perspective(930px) rotateY(-64.02deg);
       border: 1px dotted #ffe500;
    }

     .wrapper .look.eye2{
      background-image: url(hd.jpg);
      color: #ff0;
      transform-origin: right;
      right:0;
      transform: perspective(930px) rotateY(64.02deg);
      border: 1px dotted #ffe500;
    }

    .wrapper .look.eye1 span{
      position: absolute;
      animation: animate1 8s linear infinite;
    }

    @keyframes animate1
    {
      0%
      {
        left: 200%;
      }
      100%
      {
        left:-100%;
      }
    }

    .wrapper .look.eye2 span{
      position:absolute;
      animation: animate2 8s linear infinite;
    }

    @keyframes animate2
    {
      0%
      {
        left: 100%;
      }
      100%
      {
        left:-200%;
      }
    }
  </style>

Baiklah teman-teman disini saya menggunakan sebuah google font agar berbeda bentuk font yang ditampilkan, jika sahabat ingin mencari atau menggunakan bentuk text atau font yang dipakai bisa lihat disini ,

contoh :Â font-family: ‘Bungee Inline’, cursive;

Jika sudah selesai mengetikan kedua script diatas coba teman-teman jalankan pada browser masing-masing dan hasilnya seperti tampilan dibawah ini :

Saya kira cukup pembahasan pada artikel tentangÂ cara membuat 3d tag marquee, semoga bermanfaat dan sampai berjumpa lagi dengan artikel lainnya.

terima kasih

Kategori