ニュースサイトなどで実装されているのを見て自作
マークアップで準備をするとJavaScriptがチェックして、スクロールに伴い縦長の画像は上下に、横長の画像は左右に全体が見えるようにアニメーションする。画像のcssクラスに「dup」指定をするだけです。
インターフェースにて操作するだけで、実際のマークアップにタッチしませんが、つぎが上のエレメントのマークアップです。
<figure class=”wp-block-image size-large”><a class=”dup” href=”https://hustlemouse.com/wp160211/wp-content/uploads/2022/01/imgTate201111.jpg” rel=”fancybox image”><img src=”https://hustlemouse.com/wp160211/wp-content/uploads/2022/01/imgTate201111-683×1024.jpg” alt=”” class=”wp-image-835″/></a><figcaption>富士山</figcaption></figure>
つぎは横長の画像です。
