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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 CSS,JavaScriptの記述内容
5 実装のポイント

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

今回はWeb制作におけるCSSアニメーションの中でカーテンアニメーションに関する内容です。画像の上に重ねたカラーを複数に分割した状態からスライドアニメーションで画像を表示する方法を紹介します。

コーディングテクニックの使いどころ

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

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> ページの読み込みが遅い場合はこちら

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%;
  }
}