【CSS】画面の中に埋め込みスライドショーを実装する

こんにちは。
前回、前々回とCSSのアニメーションやクリッピングについて記事を書いてみました。

今回はその両方を応用してPC画面に埋め込む形でスライドするTipsをこちらの記事(Perspective Mockup Slideshow | Codrops)からご紹介します。

MockupSlideshow04

3Dマッピングの技術

こちらデモを御覧ください。

Perspective Mockup Slideshow | Demo 1

画面上の奥行きなどに合わせてスライドする部分のフレームを変形させ、中の要素でスライドをさせます。

※必要に応じて-webkit-などの接頭辞をつけてください

.mobile {
     overflow: hidden;
     position: absolute;
     z-index: 100;
     background: #333;
     width: 320px;
     height: 480px;
     top: 200px;
     left: 500px;
     outline: 1px solid transparent; /* For Firefox (jagged edges bug) */
     transform-origin: 0 0 0;
     transform: matrix3d(0.846234173238242, 0.251585817964749, 0, 0.000085171934399447, -0.115203182108559, 0.800700357116676, 0, -0.000214263459947427, 0, 0, 1, 0, 23, 14, 0, 1);
}
スライドショー枠
.slideshow {
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     list-style-type: none;
}

.slideshow__item {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
     pointer-events: none;
     z-index: 1;
     transform: translate3d(-100%, 0, 0);
}

.slideshow__item.current{
     pointer-events: auto;
     z-index: 100;
     transform: translate3d(0, 0, 0);
}

.slideshow img {
     width: 100%;
}
アニメーション部分
.slideshow__item.in--next {
     animation: inNext 0.5s forwards;
}

.slideshow__item.out--next {
     animation: outNext 0.5s forwards;
}

.slideshow__item.in--prev {
     animation: inPrev 0.5s forwards;
}

.slideshow__item.out--prev {
     animation: outPrev 0.5s forwards;
}

@keyframes inPrev {
     0% {
          transform: translate3d(0, 100%, 0);
     }
     100% {
          transform: none;
     }
}

@keyframes inNext {
     0% {
          transform: scale3d(0.5, 0.5, 1);
     }
     100% {
          transform: none;
     }
}

@keyframes outPrev {
     100% {
          transform: scale3d(0.5, 0.5, 1);
     }
}

@keyframes outNext {
     100% {
          transform: translate3d(0, 100%, 0);
     }
}

transformと@keyframesを応用する

transformで見慣れないtranslate3dというのがありますね。
これは、

translate3d(X方向の距離, Y方向の距離, Z方向の距離)
translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]
引用:transform:translate()-CSS3リファレンス

また、

scale3dについては、

scale3d(数値, 数値, 数値)
scale3d()関数では、3つの数値で3D縮尺比率を指定します。 1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率です。[sx,sy,sz]
引用:transform:scale()-CSS3リファレンス

というZ軸の設定もできる変形指定です。

これと、前回の記事「【CSS】@keyframesって何?CSSのアニメーションを知る | unitopi」の@keyframesを合わせたもので今回の技術がなりたっています。

まとめ

いかがでしたか?今回は前回までの基本的なところから、実際にどのように活用されているかをご紹介しました。もちろん1例なのでもっともっと応用的な使い方ができると思います。
もし面白い使い方があれば、是非教えてください!

フォローして続編をチェック

@universionsをフォロー