تأثير تشغيل الصفحة الواقعية على JS

ميزات المكتبة الرئيسية

• يعمل مع كل من الصور البسيطة ، مع العرض على قماش ، ومع كتل HTML - باستخدام تحويلات css
• نظام تكوين مرن جدًا وواجهة برمجة تطبيقات بسيطة
• يدعم الأجهزة المحمولة
• تغيير الاتجاه التلقائي بين الوضع الرأسي والأفقي

التركيب

npm install page-flip

<div id="book">
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
</div>

import {PageFlip} from 'page-flip';
const pageFlip = new PageFlip(document.getElementById('book'),
    {
        width: 400, // required parameter - base page width
        height: 600  // required parameter - base page height
    }
);

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));

العمليات الحسابية

• حساب زاوية التحول
• حساب رؤية الصفحة