パーツ番号 07-01-09 ・ CSSのみ

クリップリビール画像

スクロールで画面に入ると、斜めのclip-pathが開いて画像が現れる。WordPressのコンテンツセクションに高級感のある登場演出を加えられる。

galleryscrollcss

プレビュー

ソースコード

HTML

<div class="d07-01-09-img io-reveal"><span>🦋</span></div>

CSS

.d07-01-09-img{width:210px;height:170px;border-radius:14px;background:linear-gradient(135deg,#0ea5e9,#8b5cf6);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.16);clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
        .d07-01-09-img span{font-size:60px;opacity:0;transform:translateY(10px);transition:opacity .6s ease .5s,transform .6s ease .5s}
        .d07-01-09-img.is-in{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}
        .d07-01-09-img.is-in span{opacity:1;transform:translateY(0)}

クラス名 .d07-01-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。