本をめくる効果を実現するネイティブJS

この記事では、ネイティブ JS で実装された本をめくる効果の図を紹介します。効果は次のとおりです。

実装コードは以下のとおりです。コピーして貼り付けてご利用ください。

<!doctypehtml>
<html>
 
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>本をめくる効果を実現するネイティブ JS</title>
        <スタイル タイプ="text/css">
            * {
                マージン: 0;
                パディング: 0;
                リストスタイル: なし;
            }
 
            #ボタン{
                幅: 50px;
                高さ: 40px;
                行の高さ: 40px;
                位置: 相対的;
                左: 50%;
                左マージン: -25px;
                上: 100px;
            }
 
            ＃本 {
                幅: 600ピクセル;
                高さ: 400px;
                位置: 絶対;
                左: 50%;
                上位: 50%;
                マージン: -200px 0 0 -300px;
                境界線: 1px 黒一色;
                /* 最初のカバー */
                背景: url(images/0.jpg);
            }
 
            #右ページ {
                幅: 50%;
                高さ: 100%;
                位置: 絶対;
                左: 50%;
                zインデックス: 2;
                遷移: 0.5秒;
                変換: 視点(800px)、Y方向回転(0px);
                変換の原点: 左中央;
                背景：黒;
                変換スタイル: 3D を保持します。
            }
 
            #右ページ #トップノード {
                位置: 絶対;
                幅: 100%;
                高さ: 100%;
                /* 最初のカバー */
                背景: url(images/0.jpg) 300px 0;
                変換: translateZ(1px);
            }
 
            #右ページ #下部ノード {
                位置: 絶対;
                幅: 100%;
                高さ: 100%;
                /* 3番目のカバー */
                背景: url(images/2.jpg) 0 0;
                /*scaleX はブックミラーを反転した後の画像を復元します*/
                変換: translateZ(-1px) scaleX(-1);
            }
 
            #右その他のページ{
                位置: 絶対;
                左: 50%;
                高さ: 100%;
                幅: 50%;
                /* 3番目のカバー */
                背景: url(images/2.jpg) 300px 0;
                zインデックス: 1;
            }
        </スタイル>
    </head>
 
    <本文>
        <input type='button' value='次のページ' id='btn'>
        <div id='本'>
            <div id='右ページ'>
                <div id='topNode'></div>
                <div id='bottomNode'></div>
            </div>
            <div id='rightその他のページ'></div>
        </div>
        <script type="text/javascript">
            var インデックス = 0;
            var フラグ = false;
 
            btn.onclick = 関数（）{
                if (フラグ) return;
                フラグ = true;
                インデックス++;
                rightPage.style.transition = '0.5s';
                rightPage.style.transform = 'perspective(800px) rotateY(-180deg)';
 
                setTimeout(関数() {
                    // ページをめくるとすぐに次のページの背景を変更します book.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
                    // ページを瞬時に戻しますrightPage.style.transition = '0s';
                    rightPage.style.transform = 'perspective(800px) rotateY(0deg)';
 
                    // フリップペーパーの表面の背景を変更します。topNode.style.backgroundImage = 'url(images/' + (index % 2 + 1) + '.jpg)';
                    // フリップペーパーの裏面の背景を変更します。 bottomNode.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
 
                    // ページを右にめくった後に用紙の背景を変更しますOtherPage.style.backgroundImage = 'url(images/' + ((index + 1) % 2 + 1) + '.jpg)';
                    フラグ = false;
 
                }, 500);
 
            };
        </スクリプト>
    </本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: