基本はCSSのみ技術的には見開き部分はCSSだけで表示させてます。簡単なので下記のサンプルを見てください。
自動で表示させるためにはJSも使用しています。
簡単に説明しますと、背景画像で二つの画像を表示させ、背景画像を表示させる要素の横幅のみを二倍に設定します。
そして最初の画像を右にピッタリくっつけ、次の画像を左へピッタリくつけます。
これで二つの画像がピッタリくっついているように表示されます。
/*categoryはcomicとcomicRの2種類*/
const readDirect= {
comic: 'left',
comicR: 'right',
};
const readDirect2= {
comic: 'right',
comicR: 'left',
};
{/*右から左へ展開*/
'top': '50%',
'left': '50%',
'margin-left': -1*w + 'px',
'margin-top': -1*h/2 + 'px',
'width': w*2 +'px',
'height': h + 'px',
'background':
'url('+v+') ' + readDirect2[this._category] + ' center / contain no-repeat,
url('+ pairImg +') ' + readDirect[this._category] + ' center / contain no-repeat',
'transform': 'scale( '+ scale +')',
}
{/*左から右へ展開*/
'top': '50%',
'left': '50%',
'margin-left': -1*w/2 + 'px',
'margin-top': -1*h/2 + 'px',
'width': w +'px',
'height': h + 'px',
'background': 'url('+v+') center center / contain no-repeat',
'transform': 'scale( '+ scale +')',
}