Cara Membuat Efek Bergulir ke atas Posting / PAGE Baru Blog

Kode ini digunakan untuk membuat sebuah daftar yang memperlihatkan thumbnail, judul, dan deskripsi singkat dari entri feed JSON. Daftar ini akan secara otomatis bergeser secara vertikal setiap 3 detik. Ketika mouse berada di atas daftar, animasi pergeseran akan dihentikan, dan saat mouse keluar dari daftar, animasi akan dilanjutkan kembali. Semoga berguna. Juga secara pribadi sebagai catatan, jika nanti suatu saat dibutuhkan kembali. 😍

Kode di atas terdiri dari beberapa bagian dan memiliki fungsi-fungsi berikut:

CSS Styling (awal):

Mendefinisikan gaya tampilan untuk elemen-elemen dengan kelas "nu" yang digunakan dalam daftar.
Mengatur ukuran font, tipe daftar, lebar maksimum, padding, margin, dan garis bawah.
Menentukan gaya untuk tautan, gambar, dan efek hover.

JavaScript Function "bb(j)":

Merupakan fungsi yang digunakan untuk mengambil data dari feed JSON dan menampilkan entri-entri terkait dalam daftar.
Mengambil judul, URL, deskripsi singkat, dan thumbnail dari setiap entri feed.
Menggabungkan informasi tersebut menjadi elemen-elemen daftar yang ditulis ke dalam dokumen menggunakan fungsi document.write().

HTML Markup:

Membuat sebuah div dengan id "m" yang berisi sebuah elemen ul dengan kelas "nu" dan id "myList".
Menambahkan script dengan sumber data feed JSON untuk diambil menggunakan fungsi bb(j) sebagai callback.

<style>
.nu {
  font-size: 115%;
  list-style-type: none;
  max-width: 660px;
  padding: 0;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
}

.nu ul,
#rp li {
  list-style: none;
}

.nu li:hover {
  background: #f7fdea;
}

.nu li {
  border-top: 1px solid #ddd;
  padding: 6px 8px;
  overflow: hidden;
}

.nu img {
  float: left;
  margin-right: 6px;
}

.nu img:hover {
  transform: scale(1.05);
}

.nu span {
  font-size: 80%;
  color: #666;
}

.nu a:hover {
  text-decoration: none;
}
</style>

<script>
function bb(j) {
  for (var i = 0; i < 12; i++) {
    var entry = j.feed.entry[i],tt = entry.title.$t,ss,u,thumb,s1,s2;
    if (i == j.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        u = entry.link[k].href;
        ss = entry.content.$t.replace(/<[^>]*>/g,"");
        s1 = ss.substring(0,120);
        s2 = ss.substring(120,270);
      }
    }
    if (entry.media$thumbnail) {
      thumb = entry.media$thumbnail.url.replace(/\/s\d{2,4}-/, '/s70-');
    } else {
      thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nAZSA1MXqHmgC8LD016Pj3bN7bkscQNCs-HVqHIR9GCLeoknaOr6c1gFAq4UZDIz_r-7IkvcWQ8IDbwpu__fTD45yHmV_5C5bejx2MK2E7UCwW1uHCr9KwiuE-r-uelZJzQKPOGCiw/s18/ayosenyum.gif';
    }
    document.write('<a href="'+u+'" title="...'+s2+'..." target="_blank" rel="nofollow"><li><img src="'+thumb+'" alt="Thumbnail">'+tt+'<br><span>'+s1+'...</span></li></a>');
  }
}
</script>

<div id="m"><ul class="nu" id="myList"><script src="https://furniture.omasae.com/feeds/posts/default?max-results=12&amp;alt=json-in-script&amp;callback=bb"></script></ul></div>

CSS Styling (lanjutan):

Mengatur tampilan elemen-elemen dalam daftar dengan memodifikasi margin, tinggi, dan posisi.

JavaScript Function "shiftItems()":

Merupakan fungsi untuk menggeser item-item dalam daftar secara vertikal.
Mengambil referensi ke elemen daftar dengan id "myList" dan elemen pertama dalam daftar.
Mengatur transformasi CSS untuk menggeser daftar ke posisi awal.
Memindahkan elemen pertama ke akhir daftar.
Mengatur transformasi CSS dan transisi untuk menggeser daftar ke posisi berikutnya setelah jeda singkat.

JavaScript Function "applyAnimation()":

Merupakan fungsi untuk menerapkan animasi pergeseran pada daftar.
Mengatur interval berdasarkan fungsi shiftItems() untuk menjalankan pergeseran secara otomatis setiap 3 detik.
Menambahkan event listener ke daftar untuk menghentikan animasi saat mouse berada di atasnya (mouseover) dan melanjutkan animasi saat mouse keluar dari daftar (mouseout).

<style>
#myList li {margin:0;
  height: 80px;
  position: relative;
}
  #m{height:290px;overflow:hidden}  
  #myList{height: 390px;}
</style>  

<script>
function shiftItems() {
  var list = document.getElementById("myList");
  var firstItem = list.firstElementChild;
  list.style.transform = "translateY(0)";
  list.appendChild(firstItem);
  list.style.transition = "transform 0s";
  setTimeout(function() {
    list.style.transform = "translateY(-90px)";
    list.style.transition = "transform 0.3s";
  }, 10);
}

function applyAnimation() {
  var intervalId = setInterval(shiftItems, 3000);

  var list = document.getElementById("myList");
  list.addEventListener("mouseover", function() {
    clearInterval(intervalId);
  });

  list.addEventListener("mouseout", function() {
    intervalId = setInterval(shiftItems, 3000);
  });
}

applyAnimation();
</script>

Jaya Steel