Halaman Notebook JQuery Hebat Animasi Flip

Animasi Notebook JQuery Moleskine ini, kesan flip halaman gaya "Flash Page" yang licin, mempamerkan kuasa, fleksibiliti, dan kelajuan JQuery. Ia memanfaatkan plugin JQuery Booklet.

kelebihan animasi notebook jQuery ini:

• ringan: hanya 17kb (minified).
• Pemasangan mudah: Menggunakan divs gelongsor untuk peralihan halaman.
• animasi lancar: memberikan kesan pukulan halaman yang realistik.

Lihat Demo

Pemasangan:

1. Muat turun pakej notebook JQuery Moleskine.
2. mengintegrasikan HTML yang disediakan (setiap halaman memerlukan div dengan kelas "b-load").
3. Sesuaikan gaya CSS untuk menyesuaikan reka bentuk anda.
4. Laraskan pilihan JS Booklet untuk menyempurnakan animasi.

Kandungan pakej:

• Plugin JQuery Booklet
• imej yang diperlukan (latar belakang photoshop, ikon navigasi, dll.)
• jQuery 1.4.4.min.js
• JQuery Easing.1.3.js
• fon halaman tersuai
• Contoh templat html

HTML Contoh:

<div class="book_wrapper">
    <a id="next_page_button"></a>
    <a id="prev_page_button"></a>

    <div id="loading" class="loading">Loading pages...</div>

    <div id="mybook" style="display:none;">
        <div class="b-load">
            <div>
                <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174102085175009.jpg" class="lazy" alt="Amazing jQuery Notebook Page Flip Animation ">
                <h1>Slider Gallery</h1>
                <p>This tutorial details creative gallery creation...</p>
                <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="article">Article</a>
                <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="demo">Demo</a>
            </div>
            <div>
                ...
            </div>
        </div>
    </div>
</div>

Sumber: https://www.php.cn/link/7c7b23ffe10825da18545758c0917543

Soalan Lazim (Soalan Lazim):

Bahagian ini telah ditinggalkan untuk keringkasan, tetapi Soalan Lazim asal mengenai kelajuan animasi, keserasian mudah alih, kesan bunyi, animasi halaman berganda, peralihan CSS, respons, keserasian dengan perpustakaan lain, kesan bayangan, integrasi WordPress, dan ujian prestasi tetap relevan dan dapat dengan mudah dicipta berdasarkan input asal.

Atas ialah kandungan terperinci Halaman Notebook JQuery Hebat Animasi Flip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!