あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】画像をscaleで立体的にフェードインする方法

【CSS】画像をscaleで立体的にフェードインする方法

スポンサーリンク

実装内容

画像を立体的にフェードインする方法を紹介します。

実装所要時間:10分程度

実装方法

.block {
  width: 768px;
  line-height: 0;
  margin: 50px auto 0;
}

.block img {
  opacity: 0;
  transform: scale(1.2) translateY(80px);
  transition: opacity 2s ease, transform 2s ease;
}

.block.active img {
  opacity: 1;
  transform: scale(1) translateY(0);
}

【簡単な解説】
まずはフェードインさせるimgをopacity:0;で非表示にしておきます。
立体的なフェードインにするポイントはscaleで画像を拡大しておくこととtranslateYでY軸方向に移動させておくことです。
この要素にaddClass()でactiveを付与した際にscale(1)と translateY(0)の値を与えることで、縮小しながら下方向から立体的なフェードインとなります。

スポンサーリンク

コメントを残す

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