3D-回転型スライドショー

CoverFlow 型と同様、rotationY と perspective を使って、奥行きのある回転で複数枚数のスライドを移動させ、正面に来たスライドを鑑賞するタイプのスライドショーである。100 をスライド枚数で割った%を間隔としたanimationを割り付けると、スライドが整然と回転する。

サンプル

本サンプル表示用のHTML

<div id="stage">
    <div id="photo1" class="photo"><img src="wp-images/f1.jpg" width="200" height="200"></div>
    <div id="photo2" class="photo"><img src="wp-images/f2.jpg" width="200" height="200"></div>
    <div id="photo3" class="photo"><img src="wp-images/f3.jpg" width="200" height="200"></div>
    <div id="photo4" class="photo"><img src="wp-images/f4.jpg" width="200" height="200"></div>
    <div id="photo5" class="photo"><img src="wp-images/f5.jpg" width="200" height="200"></div>
    <div id="photo6" class="photo"><img src="wp-images/f6.jpg" width="200" height="200"></div>
</div>

本サンプル表示用CSS

/* 表示領域 */
#stage {
	position:relative;
	width: 600px;
	height: 400px;
	background: #333;
	overflow:hidden;
}
/* スライド共通 */
.photo {
	position: absolute;
	left: 200px;top:100px;
	border:#fff 2px solid;
}
/* 各スライドのanimation設定 */
#photo1 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-15s;
	animation:slidepass 18s infinite;
	animation-delay:-15s;
}
#photo2 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-12s;
	animation:slidepass 18s infinite;
	animation-delay:-12s;
}
#photo3 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-9s;
	animation:slidepass 18s infinite;
	animation-delay:-9s;
}
#photo4 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-6s;
	animation:slidepass 18s infinite;
	animation-delay:-6s;
}
#photo5 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:-3s;
	animation:slidepass 18s infinite;
	animation-delay:-3s;
}
#photo6 {
	-webkit-animation:slidepass 18s infinite;
	-webkit-animation-delay:0s;
	animation:slidepass 18s infinite;
	animation-delay:0s;
}
/* スライドの動きワンサイクル */
@-webkit-keyframes slidepass {
	0% {-webkit-transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	10% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	16.7% {-webkit-transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	26.7% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	33.3% {-webkit-transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	43.3% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	50% {-webkit-transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	60% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	66.7% {-webkit-transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	76.7% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	83.4% {-webkit-transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	93.4% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	100% {-webkit-transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}
@keyframes slidepass {
	0% {transform:perspective(750px) rotateY(0deg) translateZ(250px);z-index:20;}
	10% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	16.7% {transform:perspective(1000px) rotateY(60deg) translateZ(250px);z-index:18;}
	26.7% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	33.3% {transform:perspective(1000px) rotateY(120deg) translateZ(250px);z-index:14;}
	43.3% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	50% {transform:perspective(1000px) rotateY(180deg) translateZ(250px);z-index:8;}
	60% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	66.7% {transform:perspective(1000px) rotateY(240deg) translateZ(250px);z-index:10;}
	76.7% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	83.4% {transform:perspective(1000px) rotateY(300deg) translateZ(250px);z-index:12;}
	93.4% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
	100% {transform:perspective(750px) rotateY(360deg) translateZ(250px);z-index:16;}
}

CSS のスポット解説

・スライド枚数が6枚なので、画面中央を中心として、60°ずつずらした回転角を rotationY で設定すると、6枚のスライドの裏面が中心を向いて円周上に並ぶ。これを、水平方向に回転させると、順番にスライドがこちらを向いて登場する。
・スライドの中心からの距離は、translateZで設定するが、これは全てのスライドで同一値になる。
・animation のワンサイクルは18秒。3秒間隔でスライドを移動させるが、移動を速くし静止状態を作るように調整している。
・スライドが前面に出てくるときに、perspective値を小さくして(視点を近づけて、1000px -> 750px)、スライドがやや大きく見えるようにしている。


コメント

3D-回転型スライドショー — 23件のコメント

  1. いつも参考にさせていただいてます。
    質問なのですが、hoverしたときにhoverした画像だけではなく
    すべての画像が一時停止するよう設定するのは可能でしょうか?
    また、可能でしたらやりかたを教えていただけると助かります。
    よろしくおねがいします。

    • akiさんこんにちは。
      次の手順で、可能です。

      ・HTMLで、スライドを全部<div id="photos"> <div> の中に入れ込んでください。
       そして、#photos:hover で、animation を止めます。
      ・CSSは以下を追加します。
      #photos:hover {
      cursor:pointer;
      }
      #photos:hover > .photo {
      animation-play-state:paused;
      }

      • tyosbbさん返信ありがとうございます。
        教えていただいた通り実行したらできました。
        ありがとうございました。

        • 解説ですか・・・
          要するに、スライドを#photosに入れ込んで、#photosのhoverで、全てのスライドのanimationをpauseさせています。
          #photos:hover &gt; .photo は、「#photos(どのスライドも)をhoverすると、そのなかのどのスライド(.photo)について」、と言う意味です。

  2. 疑似回転が面白いなと思い、試用してみました。
    ブラウザを狭めていくと、あるところから回転がおかしくなることに気がつきました。
    本来大きな画像に隠されるべき小さな画像が、大きな画像の前を進むようになってしまうのです。

    スマホで見た場合にもこれが起こるのであれば、使えないなと思いました。
    どうしたら正しく動かせるものなのか、不勉強者のなのでさっぱりかわかりません。解決策があればお教えください。

    • こんにちは。
      このスライドショーは、レスポンシブに作っていません。
      したがって、ブラウザの幅を小さくしても、サイズにも回転状況にも変化がないはずです。

      • レスポンシブでないことは馬鹿にもわかります。
        レスポンシブにつくっていなければ、乱れてもいいというのは、いかがなものでしょう。
        その程度かと思われたら損だと思いますよ。

        • 一応の解決をみましたので書き込みます。

          乱れるのは、こうなると一部残していたcssファイルの影響しか考えられないので、一旦削除したところ、発生しなくなりました。

          どう眺めてもどこが影響したのかどうして影響するのか、門外漢にはわからないですが、悪さするcssを当該ページで使わなければ、なんとかブサイクなことにならないで、使えそうです。

          • 「一部残していたcssファイル」って何のことか分かりませんが、上記記載のcssで、そのような現象は起こらないはずです。

          • ここまで来たらものにしないともったいないかと、半レスポンシブ化してみました。

            せっかくの3D回転を、スマホ画面に合わせるために小さくしたのでは、見栄えがしません。3D回転の全体像ははみ出ても、正面の画像さえスマホ画面におさまれば、スライドインと区別つかなくなるかもしれませんが、用はたせます。

            画像をresizeにし、これを入れるボックスをdivで用意し、PC画面とスマホ画面で切り替えるようにしてみました。

            3D回転のおかげで、素人ながらちょっといかした画面ができたように思います。Thanksです。

          • 説明が不十分でした。

            サンプルのcssやHTMLには問題はなかったようです。

            試す際に出来合いのHTMLを使用したので、その中に残っていたcssを指定した記述のことです。
            cssなどややこしそうなのは大概削除していたつもりでしたが、他の記述に紛れて消し残していたものです。

            ID名やclass名がダブっていなければ問題ないかなと思っったのですが、そうでもないようですね。

          • いや!勘違いです。やはりよく見ると発生しています。

            完全に混迷にハマっていますね。
            cssもHTMLもサンプルのコピペ以外は基本的な構造、画像名のパスしか書いていないはずなのに。
            もうHTMLの記述の初歩の初歩の問題となってしまう。

  3. 少しわかってきました。

    スマホではなんの不都合もなく表示されます。
    Microsoft edgeとやらでも問題は発生しません。
    問題が発生しているのは、FireFoxでのことのようです。
    ちなみに調べるとInternet Explorerもおかしいようです。

    自分で作り変えたHTMLでのことですので、まだ正確なことはわかりませんが、大騒ぎしてすいません。少々疲れました。

    • 状況が十分つかめませんが、もう一息のところまで行っているようですね。
      落ち着いて完成させてください。

      • 続報です。
        ほぼお手上げ状態となりましたので、少しは勉強しようと他のサイトをみていて、わたしと同じ状況を起こしているサイトを見つけました。

        tyosbbさんの3D回転スライドショーをもとにしたソースサンプルとデモを載せている「blog〜たかやコミュニケーションズスタッフが日々の仕事についてつぶやく〜」(http://www.netdecm.com/blog/index.php?itemid=160)というサイトですが、そこのデモがブラウザを狭めていくと画像の重なりがおかしくなる状況をそっくり再現しています。

        もちろんFireFoxで見ての話で、tyosbbさんのサイトでは起こらないのに、他では生じるのですから、どこかがおかしいのは間違いないのですが、さっぱりわかりません。

        • brightさんに紹介していただいたサイトのデモページをFirefoxで見ましたが、何ら異常は見られませんでした。ブラウザの幅を狭めていっても、そのままの表示に変化はありません。
          どうなんでしょうね。

          • 唖然ですが、再現されないとなると、疑わしいのはパソコン。

            2台のパソコンで発生していたのでそれ以上は調べていなかったのですが、3台目のパソコンで確かめてみると、なんとなにも起こりません。

            俄然、パソコンがあやしくなってきましたが、2台で発生するということはパソコンの機種、ハードによるとは考えにくく、また、3台とも同じバージョンのOSインストールしているので、OSの問題でもなさそう。マルチブートにして1台のパソコンに置いた3つのバージョン違いのOS上で、いずれも発生していることも、OSが問題ではないことの傍証と思えます。

            パソコンのことをよく知らないものが思いつくのは、せいぜい3台で異なるのはグラフィックカードということ。ビデオドライバが最適ではない、ということでしょうか。
            それにしても、枯れたグラフィックカードに最適のビデオドライバがなく、新し目のグラフィックカードの方には最適のドライバがあるというのも腑に落ちはしませんし、なによりchromeでは問題なく、FireFoxでは発生するというのも解せませんから、大いにはずしてる可能性は高そうです。

            残念ですが、これ以上はムダぽいですね。最新と言っていいハードとこれまた最新のバージョンのOSで問題がおこらないということは、問題は解決したのであって、古いパソコンなんぞ使うやつがいつまでもグチャグチャ言うのは、見苦しいかぎりでしょう。

            長々とご迷惑かけました。というか、まるであらしみたいになってしまって、すみません。

  4. 画像1枚1枚それぞれにリンクを貼り他のページに飛ばしたいのですが
    HTMLの部分に<a href="" rel="nofollow">で指定したのですが飛びませんでした。
    リンクを貼るのは難しいのでしょうか?
    私はHTMLもcssも初心者で分からないので教えて頂けたらと思います。
    よろしくお願いいたします

    • powerさん、はじめまして。
      リンクを貼るのは簡単で、以下の様な記述にしてください。

      <div id="photo1" class="photo"><a href="http://tyoshioka.com" target="_blank" rel="nofollow"><img src="img3/f1.jpg" width="200" height="200"></a></div>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です