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

TOP > CSS > 【CSS】画像の上に重ねたカラーを複数に分割させた状態でスライドアニメーションをして画像を表示する方法

【CSS】画像の上に重ねたカラーを複数に分割させた状態でスライドアニメーションをして画像を表示する方法

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

画像の上に重ねたカラーを複数に分割させた状態でスライドアニメーションをして画像を表示する方法を紹介します。

使いどころ

スクロールをしてテキストが見えたらアニメーションを実行させるのが一般的な使い方となります。一般的なカーテンアニメーションに比べて細かく表示するので、画像に対する期待感をもたせることができます。

実装所要時間:10分程度
難易度:初心者コーダーでも実装可能

CSS,JavaScriptの記述内容

.block {
  position: relative;
  display: block;
  width: 700px;
  overflow: hidden;
  line-height: 0;
  margin: 50px auto 0;
}

.block img {
  width: 100%;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 101%;
}

.active .curtain {
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.935,.015,.335,.92) 0s,background 0s linear 0.35s;
  transform: rotateY(0deg);
}

.curtain span {
  display: block;
  width: 20%;
  height: 20.1%;
  line-height: 0;
  background: #8c6853;
}

.active .curtain span {
  transition: transform .5s cubic-bezier(.935,.015,.335,.92);
  transform: rotateY(90deg);
}

.active .curtain span:first-child {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(2),
.active .curtain span:nth-child(3) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(4) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(5),
.active .curtain span:nth-child(6) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(7),
.active .curtain span:nth-child(8) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(9),
.active .curtain span:nth-child(10) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(11) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(12),
.active .curtain span:nth-child(13) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(14),
.active .curtain span:nth-child(15) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(16),
.active .curtain span:nth-child(17) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(18) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(19),
.active .curtain span:nth-child(20) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(21),
.active .curtain span:nth-child(22) {
  transition-delay: 0.6s;
  transform-origin: left;
}

.active .curtain span:nth-child(23),
.active .curtain span:nth-child(24) {
  transition-delay: 0.6s;
  transform-origin: right;
}

.active .curtain span:nth-child(25) {
  transition-delay: 0.6s;
  transform-origin: left;
}

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

実装のポイント

現在制作中

スポンサーリンク