画像のワイプ切り替えをCSSで実現する

CSSで作る

CSSで作る

画像のワイプ切り替えをCSSで実現する

数値を変更すればCSSが出力されます。

2

3

4

5

6

7

数値を変更すれば効果とCSS出力がリアルタイムに変化します。

stay time (sec)

transition time (sec)

tilt

生成されたCSS:
HTMLは固定:

<!-- 2枚 -->
<figure class="slantwipe2">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
</figure>
<!-- 3枚 -->
<figure class="slantwipe3">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
	<div><img src="./image/panel03.webp"></div>
</figure>
<!-- 4枚 -->
<figure class="slantwipe4">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
	<div><img src="./image/panel03.webp"></div>
	<div><img src="./image/panel04.webp"></div>
</figure>
<!-- 5枚 -->
<figure class="slantwipe5">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
	<div><img src="./image/panel03.webp"></div>
	<div><img src="./image/panel04.webp"></div>
	<div><img src="./image/panel05.webp"></div>
</figure>
<!-- 6枚 -->
<figure class="slantwipe6">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
	<div><img src="./image/panel03.webp"></div>
	<div><img src="./image/panel04.webp"></div>
	<div><img src="./image/panel05.webp"></div>
	<div><img src="./image/panel06.webp"></div>
</figure>
<!-- 7枚 -->
<figure class="slantwipe7">
	<div><img src="./image/panel01.webp"></div>
	<div><img src="./image/panel02.webp"></div>
	<div><img src="./image/panel03.webp"></div>
	<div><img src="./image/panel04.webp"></div>
	<div><img src="./image/panel05.webp"></div>
	<div><img src="./image/panel06.webp"></div>
	<div><img src="./image/panel07.webp"></div>
</figure>
2024年11月初版
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。