Kode One Page Scroll

Demo kode dibawah ini bisa anda lihat pada halaman Demo Onepage Scroll. Kode HTML Kode Javascript Kode CSS Sumber: https://github.com/peachananr/onepage-scroll
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Updated: 23 April 2022

Demo kode dibawah ini bisa anda lihat pada halaman Demo Onepage Scroll.

Kode HTML

<script src="/wp-content/assets/js/onepagescroll.min.js"></script>
<link rel="stylesheet" href="/wp-content/assets/css/onepage-scroll.css" type="text/css">

Kode Javascript

onePageScroll(".main", {
   sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease-out",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", 
                                    // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 800,             // AnimationTime let you define how long each section takes to animate
   pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: true,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
   beforeMove: function(index) {},  // This option accepts a callback function. The function will be called before the page moves.
   afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
   loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
   keyboard: true,                  // You can activate the keyboard controls
   responsiveFallback: false        // You can fallback to normal page scroll by defining the width of the browser in which
                                    // you want the responsive fallback to be triggered. For example, set this to 600 and whenever 
                                    // the browser's width is less than 600, the fallback will kick in.
});

Kode CSS

.onepage-pagination li a.active:before, .onepage-pagination li a:before {
    border: 1px solid white;
    background: #fff;
}

Sumber: https://github.com/peachananr/onepage-scroll

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait

Membuat daftar taxonomy tertentu
Contoh: membuat daftar taxonomy grape-variety dari produk
Slide Horizontal dengan Mouse Scroll
Kode Slide Horizontal dengan Mouse Scroll
inspiradio
Tombol play dan stop audio
Kode untuk membuat tombol play dan stop audio
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