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...
Artikel Terkait
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.

Artikel Terkait

oxygen builder meta query product on sale
Oxygen Builder Repeater - Woocommerce Product On Sale
Catatan: Lihat gambar diatas (Oxygen Builder Advanced Query), dan jangan lupa menambahkan query: post_type : product posts_per_page : -1 // […]
Warna WooCommerce pada Oxygen Builder
Keterangan: Ganti color(45) dengan hex warna atau variabel warna pada Oxygen Builder.
Metabox: Echo Image Field di Halaman Taxonomy
Keterangan: Field ID : producers_logo
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