Seotechman.com, Bogor 14/04/2021. Dalam artikel kali ini kita akan sedikit berbagi, tentang cara membuat scroll snap horizontal dengan CSS. Tutorial ini sangat mudah diimplementasikan oleh sobat semua, dan ini juga tidak rumit sama sekali.
Bagaimana cara membuat scroll snap horizontal ini?
Untuk cara dan langkah pembuatannya sobat bisa simak dibawah ini.
Cara Membuat Scroll Snap Horizontal dengan CSS
Apabila sobat mempunyai cPanel, sobat hanya perlu membuat file style.css dan index.html (ini hanya untuk contoh saja) di filemanager. Atau, bisa juga menggunakan codepen.
1. Membuat CSS Scroll Snap
Copy semua CSS dibawah ini:
section {
--container-width: 75vw;
width: clamp(240px, var(--container-width), 1024px);
overflow-x: auto;
scroll-snap-type: x mandatory;
display: grid;
grid-auto-flow: column;
gap: 2px;
}
article {
scroll-snap-align: center;
background: hotpink;
color: white;
width: var(--container-width);
aspect-ratio: 16/9;
display: grid;
place-content: left;
}
/* 4 atau lebih */
section > article:nth-last-child(n+4),
section > article:nth-last-child(n+4) ~ article {
background: rebeccapurple;
width: 50vw;
}
/* 6 atau lebih */
section > article:nth-last-child(n+6),
section > article:nth-last-child(n+6) ~ article {
background: cyan;
color: black;
width: 35vw;
aspect-ratio: 4/3;
}
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
gap: 5vh;
padding-block: 5vh;
}
Jika sudah, silahkan sobat paste kedalam file style.css yang sudah sobat buat sebelumnya.
2. Membuat HTML Scroll Snap
Copy lagi HTML dibawah ini:
<section>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
</section>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
</section>
Masukan kedalam file index.html.
Note: Untuk CSS nya, sobat bisa rubah sesuai dengan keinginan masing-masing.
yang terakhir, lihat hasilnya.
Begitulah kira-kira cara membuat scroll snap horizontal dengan CSS.