こんにちは。
前回、前々回とCSSのアニメーションやクリッピングについて記事を書いてみました。
今回はその両方を応用してPC画面に埋め込む形でスライドするTipsをこちらの記事(Perspective Mockup Slideshow | Codrops)からご紹介します。
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例なのでもっともっと応用的な使い方ができると思います。
もし面白い使い方があれば、是非教えてください!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事