Saya baru saja membangun situs web perusahaan dan menggulir melalui layar penuh, yang secara signifikan meningkatkan pengalaman penelusuran situs web resmi. Jadi mari kita ringkas metode menggunakan fullpage.js. Selamat datang untuk mengoreksi saya
1. Pengantar Fullpage.js
FullPage.js adalah satu set plug-in JS yang menerapkan pengguliran layar penuh dari browser. Banyak situs web sekarang menggunakannya untuk mencapai pengalaman penelusuran yang lebih baik.
Fungsi yang dapat dicapai:
• Dukung kontrol maju dan mundur dan keyboard
• Beberapa fungsi panggilan balik
• Dukung acara ponsel dan tablet sentuh tablet
• Mendukung animasi CSS3
• Dukungan zoom jendela
• Penyesuaian Otomatis Saat Window Zooms
• Dapat mengatur lebar gulir, warna latar belakang, kecepatan gulir, opsi loop, panggilan balik, penyelarasan teks, dll.
2. Unduh Plugin
NPM | NPM Instal FullPage.js
Bower | Bower Instal FullPage.js
Github | https: //github.com/alvarotrigo/fullpage.js/
CDN | https: //cdnjs.com/libraries/fullpage.js
3. Metode Pengenalan File
<tautan rel = "stylesheet" href = "css/jQuery.fullpage.css"> <script src = "js/jQuery.min.js"> </script> <script src = "js/jQuery.fullpage.js"> </script>
Catatan: Anda harus terlebih dahulu memperkenalkan jQuery dan kemudian memperkenalkan FullPage. Ketika saya pertama kali mulai menulis demo, efeknya tidak tercapai karena urutan yang salah, dan kesalahan browser di FullPage.js. jQuery tidak ditentukan.
4. Tulis kode html
<Div ID = "FullPage"> <div> section1 </div> <div> section2 </div> <div> section3 </div> <viv> bagian4 </div> </div>
Semua konten disertakan dalam div dengan nama ID fullpage, dan Anda tidak dapat menambahkan ini ke tubuh.
Elemen Div dengan nama kelas .Section adalah satu halaman. Penggantian antara halaman yang berbeda dapat dikontrol melalui roda mouse dan keyboard, dan navigasi daftar juga dapat diatur.
Pada saat yang sama, jika Anda ingin membuat efek pemotongan layar horizontal di halaman, Anda dapat menambahkan div.slide di div.Section. Kodenya adalah sebagai berikut:
<div> <div> slide 1 </div> <div> slide 2 </div> <div> slide 3 </div> <div> slide 4 </div> </div>
5. Inisialisasi Penggulungan
$ (dokumen) .ready (function () {$ ('#fullpage'). fullpage ({..... // opsi untuk detail, silakan merujuk ke https://github.com/alvarotrigo/fullpage.js/});});Menyiapkan navigasi sidebar
Navigasi ini umumnya tersedia di desain situs web. Gaya navigasi fullpage default adalah titik -titik hitam kecil, dan juga mendukung pengaturan gaya lain.
<ul id = "mymenu"> <li data-menuanchor = "firstpage"> <a href = "#firstpage"> bagian pertama </a> </li> <li data--uanchor = "SecondPage"> <a href = "#detik"> bagian kedua "</a> </li> <Li DATA-MANUPOR =" SecondPage "> AMEDET </a> </li> <Li DATA-MANUPOR =" SecondPage "</a> </li> <Li DATA-MANUPOR =" SecondPage "</a> </li> <Li DATA-ME-MENURACHER =" SecondPage " Bagian </a> </li> <li data-menuanchor = "fourthpage"> <a href = "#fourthpage"> bagian keempat </a> </li>
#myMenu {position: fixed; ...} $ ('#fullpage'). FullPage ({jangkar: ['firstpage', 'decondPage', 'ThirdPage', 'FourthPage', 'LastPage'], menu: '#MyMenu'});6. Masalah yang ditemui dan solusi
Setelah situs web selesai, saya menemukan bahwa saya baru saja memasukkan halaman dan sebelum file fullpage.js diinisialisasi, dom CSS memuat, dan semua konten gaya yang ditampilkan akan diperas bersama dan akan dipulihkan setelah dimuat. Jika situs web dioptimalkan dan kecepatan internet sangat kuat, periode ini akan singkat, tetapi masih akan membawa pengalaman pengguna yang buruk.
Jadi coba berbagai solusi:
1.Div.Section
bagian {overflow: tersembunyi}
Setelah pengujian, metode ini tidak digunakan.
2. Atur topeng kosong, hanya topeng yang ditampilkan sebelum semua halaman selesai, konten tema disembunyikan, dan setelah pemuatan, topeng tampilan konten dihapus. Tentu saja, Anda juga dapat mengatur konten terkait situs web di lapisan topeng.
Demo Metode Implementasi Spesifik:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <title> unt judul dokumen </iteme> <script language = "javaScript" type = "text/javascript"> function showAllContent (status1, status2) { document.geteLementByIdx ("showContent"). style.display = status1; document.geteLementByIdx ("showload"). style.display = status2; } </script> </head> <body onload = 'showAllContent ("", "none")'> <div id = "showload" style = "z-index: 2; display: block; lebar: auto; tinggi: auto;"> Halaman ini memuat ... </div> <div id = "showcontent" style = "z-index: 1; </div>
<script> showAllContent ("none", ""); </script>
</body>
</html>
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.