Demo Scroll Snap hanya dengan CSS

Fungsi scroll snap hanya dengan CSS saja tanpa javascript.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Artikel Terkait
Updated: 23 April 2022
1
2
3
4

Kode ini saya temukan di CodePen ketika sedang mempelajari fullpage.js. Ternyata hanya dengan CSS saja kita bisa memanfaatkan fungsi "snap". Tentunya tidak sekaya fitur yang menggunakan javascript, namun jika keperluan kita cukup dengan CSS saja, maka dengan menggunakan kode ini bisa membuat performa website anda lebih baik jika dibandingkan menggunakan javascript.

Untuk pengguna Oxygen Builder, cukup menambahkan element Code Block dan mengisi kode HTML dan CSS seperti contoh dibawah.

Membutuhkan jasa untuk mengkonversi website anda menjadi WordPress & Oxygen Builder?
Estimasi Biaya

Kode HTML

<div class="scroll-container">
	<div class="scroll-area">1</div>
	<div class="scroll-area">2</div>
	<div class="scroll-area">3</div>
	<div class="scroll-area">4</div>
</div>

Kode CSS

.scroll-container,
.scroll-area {
  max-width: 100%;
  height: 300px;
  font-size: 60px;
}

.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scroll-area:nth-of-type(1) {
  background: #49b293;
}

.scroll-area:nth-of-type(2) {
  background: #c94e4b;
}

.scroll-area:nth-of-type(3) {
  background: #4cc1be;
}

.scroll-area:nth-of-type(4) {
  background: #8360A6;
}

Referensi: https://codepen.io/tutsplus/pen/qpJYaK

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Artikel Terkait

Demo Onepage Scroll
Kode HTML Kode Javascript
Demo Motion Effect
Locomotive Scrolling on WordPress and Oxygen Builder
Demo Efek Scroll
Demo halaman website menggunakan efek scroll, dibuat dengan WordPress dan Oxygen Builder
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross