Home CSS Teknik Marquee Kembali dengan Tampilan Modern dan Canggih

25 August 2022

Teknik Marquee Kembali dengan Tampilan Modern dan Canggih

Komentar
بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Teknik Marquee Kembali dengan Tampilan Modern dan Canggih

TEKNIK MARQUEE adalah teknik dalam dunia pemrograman berbasis web dengan indikasi obyek bergerak. Pergerakan bisa ke atas, ke bawah, ke kiri, ke kanan, diagonal ataupun dalam perkembangannya ada juga teknik marquee bergelombang. Tapi sekarang, di jaman yang semakin canggih ini, Teknik Marquee tidak sekedar pergerakan obyek yang standar-sandar saja. Tapi sudah merambah ke teknik yang bisa dibilang modern.

Teknik modern ini dapat dilihat dari mode Marquee yang ditampilkan yaitu berupa banner 3 dimensi. Dimana banner itu akan menampilkan tulisan berjalan seperti Run Text seperti di banner-banner atau baliho yang terpampang di depan toko maupun instansi pemerintahan. Tampilan text itu bergerak seolah-oleh seperti menembus batas ruang yang menjadi background marquee. Tapi ternyata tidak, itu hanya ilusi dan teknik terbaru dari marquee yang dikembangkan di beberapa dekade tahun ini.

Atau pernah lihat banner bergerak dengan tulisan berwarna pelangi dibawahnya. Jika belum melihatnya, sekaranglah saatnya melihat pada tampilan yang akan diterapkan dalam trik kali ini. Karena nanti tampilan marquee modern juga berupa gambar yang berjalan menyerong dengan tulisan menyerong juga berada dibawahnya. Bergerak bersamaan dan menampilkan aksi yang menawan dari trik marquee. Teknik Marquee hidup lagi dengan Tampilan yang lebih Modern, Atraktif dan Canggih.

Baca Juga :



Beberapa tahun lalu saya ingat betul bagaimana teknik marguee ini sangat terkenal dan banyak para blogger yang memakainya. Termasuk saya juga hehe. Teknik unik dan menarik ini banyak menghiasi blog-blog pada tahun sekitar 2010 an. Pada tahun tersebut, teknik marquee masih menjadi salah satu teknik pemrograman web yang handal. Membuat teks dan obyek gambar atau foto bisa bergerak seperti berjalan dari kiri ke kanan atau atas ke bawah dan juga sebaliknya. Dejavu mengulang kembali masa-masa itu.

Pada artikel sebelumnya saya juga sudah membahas tentang teknik ini dan memberikan contoh berupa aplikasinya yang ada di postingan blog. Di artikel Efek Marquee Superman Terbang dengan HTML dan CSS disitu tercantum beberapa teknik marquee. Masih terbilang trik lama dengan kode standar seperti itu. Tapi saat ini teknik itu berkembang dan bereinkarnasi menjadi sebuah teknik yang tidak lagi dipandang sebelah mata, karena penggunaan kode pemrograman sudah semakin canggih dan tidak melulu itu itu saja. Sekarang yuk kita praktekkan saja tutorialnya.

Teknik Marquee Kembali dengan Tampilan Modern dan Canggih


Teknik Marquee 1


1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Setelah masuk ke dalamnya, cari kode ]]></b:skin>
4. Tempelkan kode ini diatasnya.
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
}
body {
  --space: 2rem;
  display: grid;
  align-content: center;
  overflow: hidden;
  gap: var(--space);
  width: 100%;
  font-family: "Corben", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
}
.marquee {
  --duration: 60s;
  --gap: var(--space);
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  transform: skewY(-3deg);
}
.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__group {
    animation-play-state: paused;
  }
}
.marquee__group img {
  max-width: clamp(10rem, 1rem + 28vmin, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}
.marquee__group p {
  background-image: linear-gradient(
    75deg,
    hsl(240deg 70% 49%) 0%,
    hsl(253deg 70% 49%) 11%,
    hsl(267deg 70% 49%) 22%,
    hsl(280deg 71% 48%) 33%,
    hsl(293deg 71% 48%) 44%,
    hsl(307deg 71% 48%) 56%,
    hsl(320deg 71% 48%) 67%,
    hsl(333deg 72% 48%) 78%,
    hsl(347deg 72% 48%) 89%,
    hsl(0deg 73% 47%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.marquee--borders {
  border-block: 3px solid dodgerblue;
  padding-block: 0.75rem;
}
.marquee--reverse .marquee__group {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}


5. Kemudian tempelkan ini di Tata Letak saya yakin kalian sudah pada tahu letaknya ini.
<div class="marquee">
  <div class="marquee__group">
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0vm82MqNqxcLulBmBrpFMgccp9PU36LSZWRLUGZKpHUM_5IbLFjhrFu-Ou97d2hIgLi6G0MWKEetzaDnjcLWEUxheBnuQgx31wtTel2RNUWffissbDH-2Nb1eh1vjxS2rXa1u57u0wOrJAwyALpbrt8gbA_dD_Qtems3MMFQdz8L2I8yFEpw4j4d/s1600/MERAH.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuLhNAkWNC0HFOIsIzaXcAt8rxmVM1P0r2VelSPU8NW9R0Gu3hlup0BuarcvODNNMFZkL0hSJIAbJLYzVI1ykhD_Wfpust62vfHx9Vp6776uuI8XgyLzs3GW1-CdQoPD3sVcEKHRPeWLOMXD3xPcmG1P6FdPRpVWkwHa5V35pq03aG2re6BiF-ex3/s1600/HIJAU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IwDR9qzUa0etrK725bCS1wXwtLI0LkE7wvIYxwxdvVdY1P82vwrY6Vbw-PlWsC52sWawQgRJLvKvrgsBTjFAVygoIbMnLHcGpHryO4UZiYHdTody2a6nw9uf-YdfHI8N884QWwbKa7_uylc74ak0V_i9NJRZ5sVjMr1eqLO1YyuYKksoirvJ9tdP/s1600/COKLAT.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsOQbUCt5jlQE_F_ppb_t3jC9whN7ZtxjGV6IqBWM_NxLKknjNXpfjDjpEojGZrrHJ2EBPHyKWH9mBb2_8xnFlMngcvIvYF8yoLDkwfev9Efv7QKQMvXeV74CwFqLbW-PIso92iEybtXEVO0lcEyQ89WF1v_XEz5oF2f9KlrMD9-a6Rtl6yVNH3pf/s1600/UNGU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTQ_KXEbXoWqaRt2LN9kiAlcSCQZHTEd2hoeeMT0Abcfc1x9xz2GO8vJ4CUYDtwd2ZLeTnBCDoxvk0n-c0TaZTnp7r20xCP4kWpdk_TzmrAbRmnzIqLjy862AECoRnl5dJdM7AcIuz31Jly_4aHeUafICiHxL2Fb4Y9EO5V3u2TN7_jIfLZtBhdTe/s1600/BIRU.jpg'>
  </div>
  <div aria-hidden="true" class="marquee__group">
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0vm82MqNqxcLulBmBrpFMgccp9PU36LSZWRLUGZKpHUM_5IbLFjhrFu-Ou97d2hIgLi6G0MWKEetzaDnjcLWEUxheBnuQgx31wtTel2RNUWffissbDH-2Nb1eh1vjxS2rXa1u57u0wOrJAwyALpbrt8gbA_dD_Qtems3MMFQdz8L2I8yFEpw4j4d/s1600/MERAH.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuLhNAkWNC0HFOIsIzaXcAt8rxmVM1P0r2VelSPU8NW9R0Gu3hlup0BuarcvODNNMFZkL0hSJIAbJLYzVI1ykhD_Wfpust62vfHx9Vp6776uuI8XgyLzs3GW1-CdQoPD3sVcEKHRPeWLOMXD3xPcmG1P6FdPRpVWkwHa5V35pq03aG2re6BiF-ex3/s1600/HIJAU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IwDR9qzUa0etrK725bCS1wXwtLI0LkE7wvIYxwxdvVdY1P82vwrY6Vbw-PlWsC52sWawQgRJLvKvrgsBTjFAVygoIbMnLHcGpHryO4UZiYHdTody2a6nw9uf-YdfHI8N884QWwbKa7_uylc74ak0V_i9NJRZ5sVjMr1eqLO1YyuYKksoirvJ9tdP/s1600/COKLAT.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsOQbUCt5jlQE_F_ppb_t3jC9whN7ZtxjGV6IqBWM_NxLKknjNXpfjDjpEojGZrrHJ2EBPHyKWH9mBb2_8xnFlMngcvIvYF8yoLDkwfev9Efv7QKQMvXeV74CwFqLbW-PIso92iEybtXEVO0lcEyQ89WF1v_XEz5oF2f9KlrMD9-a6Rtl6yVNH3pf/s1600/UNGU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTQ_KXEbXoWqaRt2LN9kiAlcSCQZHTEd2hoeeMT0Abcfc1x9xz2GO8vJ4CUYDtwd2ZLeTnBCDoxvk0n-c0TaZTnp7r20xCP4kWpdk_TzmrAbRmnzIqLjy862AECoRnl5dJdM7AcIuz31Jly_4aHeUafICiHxL2Fb4Y9EO5V3u2TN7_jIfLZtBhdTe/s1600/BIRU.jpg'>
  </div>
</div>
<div class="marquee marquee--borders" style="--duration: 100s">
  <div class="marquee__group">
    <p>Alifacode.com | Tutorial Blog</p>
    <p aria-hidden="true">Alifacode.com | Tutorial Blog</p>
    <p aria-hidden="true">Alifacode.com | Tutorial Blog</p>
  </div>
  <div aria-hidden="true" class="marquee__group">
    <p>Alifacode.com | News Tutorial</p>
    <p>Alifacode.com | News Tutorial</p>
    <p>Alifacode.com | News Tutorial</p>
  </div>
</div>
<div class="marquee marquee--reverse">
  <div class="marquee__group">
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0vm82MqNqxcLulBmBrpFMgccp9PU36LSZWRLUGZKpHUM_5IbLFjhrFu-Ou97d2hIgLi6G0MWKEetzaDnjcLWEUxheBnuQgx31wtTel2RNUWffissbDH-2Nb1eh1vjxS2rXa1u57u0wOrJAwyALpbrt8gbA_dD_Qtems3MMFQdz8L2I8yFEpw4j4d/s1600/MERAH.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuLhNAkWNC0HFOIsIzaXcAt8rxmVM1P0r2VelSPU8NW9R0Gu3hlup0BuarcvODNNMFZkL0hSJIAbJLYzVI1ykhD_Wfpust62vfHx9Vp6776uuI8XgyLzs3GW1-CdQoPD3sVcEKHRPeWLOMXD3xPcmG1P6FdPRpVWkwHa5V35pq03aG2re6BiF-ex3/s1600/HIJAU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IwDR9qzUa0etrK725bCS1wXwtLI0LkE7wvIYxwxdvVdY1P82vwrY6Vbw-PlWsC52sWawQgRJLvKvrgsBTjFAVygoIbMnLHcGpHryO4UZiYHdTody2a6nw9uf-YdfHI8N884QWwbKa7_uylc74ak0V_i9NJRZ5sVjMr1eqLO1YyuYKksoirvJ9tdP/s1600/COKLAT.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsOQbUCt5jlQE_F_ppb_t3jC9whN7ZtxjGV6IqBWM_NxLKknjNXpfjDjpEojGZrrHJ2EBPHyKWH9mBb2_8xnFlMngcvIvYF8yoLDkwfev9Efv7QKQMvXeV74CwFqLbW-PIso92iEybtXEVO0lcEyQ89WF1v_XEz5oF2f9KlrMD9-a6Rtl6yVNH3pf/s1600/UNGU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTQ_KXEbXoWqaRt2LN9kiAlcSCQZHTEd2hoeeMT0Abcfc1x9xz2GO8vJ4CUYDtwd2ZLeTnBCDoxvk0n-c0TaZTnp7r20xCP4kWpdk_TzmrAbRmnzIqLjy862AECoRnl5dJdM7AcIuz31Jly_4aHeUafICiHxL2Fb4Y9EO5V3u2TN7_jIfLZtBhdTe/s1600/BIRU.jpg'>
  </div>

  <div aria-hidden="true" class="marquee__group">
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0vm82MqNqxcLulBmBrpFMgccp9PU36LSZWRLUGZKpHUM_5IbLFjhrFu-Ou97d2hIgLi6G0MWKEetzaDnjcLWEUxheBnuQgx31wtTel2RNUWffissbDH-2Nb1eh1vjxS2rXa1u57u0wOrJAwyALpbrt8gbA_dD_Qtems3MMFQdz8L2I8yFEpw4j4d/s1600/MERAH.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsuLhNAkWNC0HFOIsIzaXcAt8rxmVM1P0r2VelSPU8NW9R0Gu3hlup0BuarcvODNNMFZkL0hSJIAbJLYzVI1ykhD_Wfpust62vfHx9Vp6776uuI8XgyLzs3GW1-CdQoPD3sVcEKHRPeWLOMXD3xPcmG1P6FdPRpVWkwHa5V35pq03aG2re6BiF-ex3/s1600/HIJAU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IwDR9qzUa0etrK725bCS1wXwtLI0LkE7wvIYxwxdvVdY1P82vwrY6Vbw-PlWsC52sWawQgRJLvKvrgsBTjFAVygoIbMnLHcGpHryO4UZiYHdTody2a6nw9uf-YdfHI8N884QWwbKa7_uylc74ak0V_i9NJRZ5sVjMr1eqLO1YyuYKksoirvJ9tdP/s1600/COKLAT.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvsOQbUCt5jlQE_F_ppb_t3jC9whN7ZtxjGV6IqBWM_NxLKknjNXpfjDjpEojGZrrHJ2EBPHyKWH9mBb2_8xnFlMngcvIvYF8yoLDkwfev9Efv7QKQMvXeV74CwFqLbW-PIso92iEybtXEVO0lcEyQ89WF1v_XEz5oF2f9KlrMD9-a6Rtl6yVNH3pf/s1600/UNGU.jpg'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTQ_KXEbXoWqaRt2LN9kiAlcSCQZHTEd2hoeeMT0Abcfc1x9xz2GO8vJ4CUYDtwd2ZLeTnBCDoxvk0n-c0TaZTnp7r20xCP4kWpdk_TzmrAbRmnzIqLjy862AECoRnl5dJdM7AcIuz31Jly_4aHeUafICiHxL2Fb4Y9EO5V3u2TN7_jIfLZtBhdTe/s1600/BIRU.jpg'>
  </div>
</div>




Nah selesai sudah Marquee tahap 1. Sekarang berlanjut lagi pada tahap ke 2 ya.

Teknik Marquee 2


1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Setelah masuk ke dalamnya, cari kode ]]></b:skin>
4. Tempelkan kode ini diatasnya.
@font-face {
  font-family: Agency;
   src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body { 
  font-family: Avenir, sans-serif;
  marging: 0;
}
#marquee { 
  margin-top: 9rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block; 
	height: 12rem; 
	width: 20rem;
	position: relative;
}
#marquee div:first-of-type { 
	background: #006400;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #006400;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #fff;
}
#marquee div { 
    font-size: 8rem;
    overflow: hidden;
}
#marquee div span { 
    position: absolute; 
    width: 400%;    
    line-height: 1.4;
}
#marquee div:first-of-type span {
    transform: translateX(40rem);
    animation: leftcrawl 14s linear infinite;
    text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#marquee div:last-of-type span {
    transform: translateX(20rem);
    animation: rightcrawl 14s linear infinite;
}
@keyframes leftcrawl {
	to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
	to { transform: translateX(-130rem); }
}


5. Lanjut lagi dan tempelkan kode dibawah ini di Tata Letak saya yakin kalian sudah pada tahu letaknya.
<div id="marquee">
    <div>
        <span>RSI KOTA MAGELANG</span>
    </div>
    <div aria-hidden="true">
        <span>RSI KOTA MAGELANG</span>
    </div>
</div>


Nah itu sudah selesai semua. Dan sekarang kita lihat ya demonya.



Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Teknik Marquee Kembali dengan Tampilan Modern dan Canggih . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )