記事に戻る（Back to Article）

【CSS】画像の上に重ねた斜めに傾けたカラーをスライドした後に画像を表示させるカーテンアニメーションの実装方法のデモページ

※デベロッパーツール等でソースコードをご確認ください（Please check using Developer tools）

脱jQuery版

English Page

マイナビAGENT

スポンサーリンク

マイナビAGENT

CSS

.block {
  position: relative;
  width: 768px;
  overflow: hidden;
  margin: 70px auto 0;
}

.block:after {
  content: '';
  display: block;
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: #55310e;
  transform: rotate(5deg);
  transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.active.block:after {
  transform: rotate(5deg) translateX(100%);
  transition: all 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.8s;
}

@media screen and (max-width:640px){
  .block {
    width: 100%;
  }
}

JavaScript

$(window).on('load', function(){
  $(".block").addClass("active");
});