Efek Teks 3D Marquee Super Keren Dengan CSS3

Labkom99.com – Pada kesempatan kali ini labkom99 mencoba belajar HTML dan CSS3 untuk membuat efek teks 3D marquee super keren. Efek teks ini merupakan efek teks 3D marquee super keren yang dibuat dengan CSS3 murni. Efek teks marquee didesain dengan latar belakang efek kubus 3D. Saat teks bergerak di didalamnya, teks itu seperti diproyeksikan ke dinding dan arah gerakan akan berubah saat teks keluar dari sudut kebus tersebut.

Alat / Bahan Baku

Notepad

Bisa menggunakan tools web programming lain

Perhatian

Sebelum belajar membuat efek teks 3D marquee super keren pada bagian ini, sabaiknya memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language. Dan bagi yang belum mengetahui cara membuat template, cara menyimpan dan cara membuka file HTML dapat mempelajarinya pada artikel Bagaimana Cara Membuat Template HTML.

Metode / Langkah

Dalam membuat teks 3D marquee super keren hanya membetuhkan beberapa trik CSS3 yang sangat sederhana. Membuat efek animasi teks 3D marquee super keren menggunakan CSS3 dengan memberikan sentuhan JQuery untuk membuat efek 3D supaya lebih keren.

Struktur HTML

Efek tesk 3D marquee dibuat menggunakan elemen <div> sebagai wadah dengan dua sub- <div> elemen di dalamnya. Elemen <div> ini digunakan untuk membuat bagian kiri dan kanan dinding kubus. aria-hidden=”true”Atribut digunakan untuk menghindari duplikasi saat pembaca layar merayapi teks yang di tampilkan.

<div id="marquee">
    <div><span>Selamat Datang Di Labkom99</span></div>
    <div aria-hidden="true"><span>Selamat Datang Di Labkom99</span></div>
</div>

CSS

#marquee Efek perspektif 3D disetel pada elemen kontainer marquee , dengan perspektif 500. Div Elemen di dalamnya ditampilkan sebagai elemen tingkat blok sebaris dan lebar serta tinggi relatif. Metode penentuan posisi adalah menggunakan posisi relatif.

#marquee {
  margin-top: 3rem;
  -webkit-perspective: 500px;
          perspective: 500px;
  font-size: 0;
  font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}

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


#marquee div {
  font-size: 8rem;
  overflow: hidden;
}

#marquee div span {
  position: absolute;
  width: 400%;
  line-height: 1.4;
}

Kemudian atur latar belakang untuk dinding kiri pada div:first-of-type dan div:last-of-type kanan melalui dan masing – masing eleman. Dan ubah ,warna teks dan sudut rotasi sesuai keinginan.

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

#marquee div:last-of-type {
  background: #b7977b;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  color: #f8c9d9;
}

Dua span elemen di depan digunakan untuk membuat efek animasi marquee. Kedua elemen tersebut menjalankan left crawl animasi dan right crawl animasi. Kedua animasi ini menggunakan fungsi translate X() untuk memindahkan elemen ke arah sumbu X dalam waktu 14 detik.

@-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);
  }
}
#marquee div:first-of-type span {
  -webkit-transform: translateX(60rem);
          transform: translateX(60rem);
  -webkit-animation: leftcrawl 14s linear infinite;
          animation: leftcrawl 14s linear infinite;
  text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}

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

Terakhir, jika lebar layar perangkat kurang dari 993 piksel, marquee akan membatalkan efek 3D dan menampilkan efek kubus secara datar.

@media all and (max-width: 993px) {
  #marquee {
    -webkit-perspective: none;
            perspective: none;
  }

  #marquee div:last-of-type {
    opacity: 0;
    height: 0;
  }

  #marquee div:first-of-type {
    width: 80%;
  }
}

Untuk source code lengkapnya membuat efek teks 3D super keren dengan CSS3 dapat di DOWNLOAD di link aktif tersebut

Post Views: 276