CSS PR

ズームアウトしながら画像表示させるアニメーションをCSSで実装する

記事内に商品プロモーションを含む場合があります

ズームアウトしながら画像表示させるアニメーションをCSSで実装してみました。
近年ヌルヌル動くサイトが多いので、1つの画像表示のサンプルにどうぞ!

ズームアウトしながら画像表示させるアニメーションをCSSで実装する

要素が見えた瞬間に、classを追加するJSの説明は省きます。
inview」を使用しています。

HTML

<p><img class="img" src="https://ninjinmilk.com/wp-content/uploads/2022/01/5oZJuItF_400x400-1.jpg" alt=""></p>

 

CSS

.img{
    transition: 3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: scale(1.2);
}
p{
    width: 400px;
    overflow: hidden;
}
p.active .img{
    transform: none;
    opacity: 1;
}

実装デモ

実際に動かしてみるとこんな感じです。

デモページ

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)