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

TOP > CSS > 【CSS】画像をscaleで立体的にフェードインさせる方法/Fade in images stereoscopically

【CSS】画像をscaleで立体的にフェードインさせる方法/Fade in images stereoscopically

スポンサーリンク

コーディングテクニックの実装内容

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

実装所要時間:10分程度

CSS,JavaScriptの記述内容

.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)の値を与えることで、縮小しながら下方向から立体的なフェードインとなります。

おすすめ記事

スポンサーリンク

「【CSS】画像をscaleで立体的にフェードインさせる方法/Fade in images stereoscopically」への1件のフィードバック

コメントは受け付けていません。