TOP

横回転クリスタルスタイルサムネイル取り付けCSS解説

通常サムネイル画像というと横配置が一般的でしょうか?
で、お使いの方は置くおられでしょうね...
でも、時には変わり種のスタイルでもいいんじゃないでしょうか?

 

高級イメージを表すときとか?

 

華やかなイメージも...時には良いかな?

 

画像をクリックしても、次のスタイルへ切り替わるわけではありませんが、
リンク誘導ならできますね..

 

横にクリスタルスタイルで回転するサムネイルギャラリー群
...作動をご覧ください

 

 

導入手順

 

配置したい記事内に配置...6つの画像コードのみ...サイズ指定で書き換えてください

 

シリウスで取り込む画像コードと改行例
原本<img src="<% pageDepth %>img/av1.jpg" alt="" />
改行例<img src="<% pageDepth %>img/av1.jpg"style="height:200px;width:200px;" alt="" />

 

以下コピー
<div id="stage">
<div id="photo1" class="photo"><img src="<% pageDepth %>img/ac1.jpg"style="height:200px;width:200px;" alt="" /></div>
<div id="photo2" class="photo"><img src="<% pageDepth %>img/ac2.jpg"style="height:200px;width:200px;" alt="" /></div>
<div id="photo3" class="photo"><img src="<% pageDepth %>img/ac3.jpg"style="height:200px;width:200px;" alt="" /></div>
<div id="photo4" class="photo"><img src="<% pageDepth %>img/ac4.jpg"style="height:200px;width:200px;" alt="" /></div>
<div id="photo5" class="photo"><img src="<% pageDepth %>img/ac5.jpg"style="height:200px;width:200px;" alt="" /></div>
<div id="photo6" class="photo"><img src="<% pageDepth %>img/ac6.jpg"style="height:200px;width:200px;" alt="" /></div>
</div>

 

 

画像コードは例記載

 

シリウス機能で読み込む画像コードに
<img src="<% pageDepth %>img/1a345.png" alt="" />

 

縦横ともサイズ指定の記載を書き足す...例
<img src="<% pageDepth %>img/ac8.jpg"style="height:150px;width:150px;" alt="" /...例

 

複数のページで画像だけ入れ替えで表示は可能です

 


 

CSS記載..スタイルシートに張り付け
エントリーPならスタイルの割り込みでもOKO

 

 

/* 表示領域 */
#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指定方法
CSS形成サムネイルギャラリーカスタマイズまとめ
トップページ

 


横回転型サムネイルギャラりーCSS指定方法関連解説
サムネイル画像のロールオーバー効果を3例
シリウスサイト、記事内に配置したサムネイルギャラリーのロールオーバー3実動、(拡大、縮小、枠外オーバー)と、作動原本CSSとHTMLコード詳細
折り込み収納から順送りでセンター表示するサムネイル画像
折り込まれる収納位置から順送りでセンター表示する変わり種サムネイル画像の取り付け手順