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

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