1<div class="scorlling">
 2  <!-- Setiap div ini adalah item yang akan bergerak -->
 3  <div class="item item1">
 4    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/22818.jpg" alt="4kwallpapers" />
 5  </div>
 6  <div class="item item2">
 7    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/22582.png" alt="4kwallpapers" />
 8  </div>
 9  <div class="item item3">
10    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/24763.jpg" alt="4kwallpapers" />
11  </div>
12  <div class="item item4">
13    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/20822.png" alt="4kwallpapers" />
14  </div>
15  <div class="item item5">
16    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/25019.png" alt="4kwallpapers" />
17  </div>
18  <div class="item item6">
19    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/20031.jpg" alt="4kwallpapers" />
20  </div>
21  <div class="item item7">
22    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/18785.jpg" alt="4kwallpapers" />
23  </div>
24  <div class="item item8">
25    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/17605.png" alt="4kwallpapers" />
26  </div>
27  <div class="item item9">
28    <img src="https://4kwallpapers.com/images/walls/thumbs_2t/25015.jpg" alt="4kwallpapers" />
29  </div>
30</div>      

 1/* Variabel global untuk kustomisasi */
 2:root {
 3  --total-items: 9; /* Jumlah total item */
 4  --animation-duration: 30s; /* Durasi animasi */
 5}
 6 
 7/* Container utama untuk scrolling */
 8.scorlling {
 9  width: 100%;
10  max-width: 1536px;
11  position: relative;
12  height: 150px; /* Tinggi container */
13  overflow: hidden;
14 
15  /* Masking untuk memberikan efek fade di sisi kiri dan kanan */
16  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
17}
18 
19img{
20  width: 100%;
21  height: 100%;
22}
23 
24/* Animasi untuk menggeser elemen ke kiri */
25@keyframes scrollleft {
26  to {
27    left: -200px; /* Elemen akan bergerak ke kiri sejauh 200px */
28  }
29}
30 
31/* Gaya dasar untuk setiap item */
32.item {
33  width: 250px; /* Lebar setiap item - jika diubah jangan lupa atur left mask */
34  height: 100%; /* Tinggi mengikuti container */
35  background-color: #bababa; /* Warna latar belakang */
36  border-radius: 6px; /* Membuat sudut melengkung */
37  position: absolute; /* Posisi absolut untuk animasi */
38  overflow: hidden; /* Sembunyikan konten yang melebihi lebar */
39 
40  /* Posisi awal elemen di luar layar */
41  left: max(calc(250px * var(--total-items)), 100%);
42 
43  /* Pengaturan animasi */
44  animation-name: scrollleft; /* Nama animasi */
45  animation-duration: var(--animation-duration); /* Durasi animasi */
46  animation-timing-function: linear; /* Kecepatan animasi konstan */
47  animation-iteration-count: infinite; /* Animasi berjalan terus-menerus */
48}
49 
50/* Pengaturan delay animasi untuk setiap item */
51.item1 {
52  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 1) * -1);
53}
54.item2 {
55  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 2) * -1);
56}
57.item3 {
58  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 3) * -1);
59}
60.item4 {
61  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 4) * -1);
62}
63.item5 {
64  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 5) * -1);
65}
66.item6 {
67  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 6) * -1);
68}
69.item7 {
70  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 7) * -1);
71}
72.item8 {
73  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 8) * -1);
74}
75.item9 {
76  animation-delay: calc(var(--animation-duration) / var(--total-items) * (var(--total-items) - 9) * -1);
77}