第11回ホームページ勉強会

　第99日目開催：2024年 9月12日

　今回の勉強会では、今回も『Internet Archive Wayback Machine』に保存されている､『CSSだけで作る「横回転サンプル色々(コピペOK)｣』の5番目の項目である『内側もオシャレなループアニメーション』と、西ノ谷さんから紹介して頂いた、『ズームしながら、ふわっと表示が切り替わるスライドショー』ついて勉強しましょう

事前準備：
　『内側もオシャレなループアニメーション』用には、4：3の600×450pxの写真を6枚準備して下さい。『ズームしながら、ふわっと表示が切り替わるスライドショー』は全画面表示ですから、パソコンの画面16：9に対応して、16：9の800×450pxの写真を6枚準備して下さい。

｢Wayback Machine｣から『6面_⑤内側もオシャレなループアニメ』
　CSSだけで作る「回転する3Dバナー/ vol3 6面の横回転サンプル色々」(コピペOK)に紹介されているアニメーションの最後の5品目めのアニメーションを実施して見ましょう。

　Webページからコピペして私の写真(4：3)に入れ替え、[START][RESET]ボタンを廃止した事例を下記に表示します。

1Link
2
3
4
5
6

今回の専用CSSは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
32
32
33

ul.t5 {
animation: anime 8s linear infinite;
transform: rotateX(-20deg) rotateY(0deg);
width: 400px;
height: 293px;
}
.t5 li {
transform-style: preserve-3d;
width: 200px;
height: 150px; /*　4：3で200pxから150pxに変えた　*/
}
.t5 li::before {
background: rgba(0,0,0,0.5);
content: '';
display: block;
position: absolute; top: 0; left: 0;
transform: translate3d(0, -43.3px, -75px) rotateX(120deg);
width: 100%;
height: 173.5px;
}
.t5 li:nth-child(odd)::before {
background: rgba(255,255,255,0.5);
}
@keyframes anime {
0% {transform: rotateX(-20deg) rotateY(0); }
100% {transform: rotateX(-20deg) rotateY(-360deg); }
}
.t5 .face1 {transform: translate3d(-25%, 45px,　86.6px) rotateY(-60deg); }
.t5 .face2 {transform: translate3d( 50%, 45px, 173.2px); }
.t5 .face3 {transform: translate3d(125%, 45px,　86.6px) rotateY(60deg); }
.t5 .face4 {transform: translate3d(125%, 45px, -86.6px) rotateY(-240deg); }
.t5 .face5 {transform: translate3d( 50%, 45px,-173.2px) rotateY(180deg); }
.t5 .face6 {transform: translate3d(-25%, 45px, -86.6px) rotateY(240deg); }

　ul.t5 に記載されている2行目のanimeの 8sは1回転の時間。 4,5行目のwidth: 400px; height: 293px; は6枚の写真が回転しながら広がって表示される全領域。

　.t5 li の9,10行目のwidth: 200px; height: 200px; はオリジナルの写真の表示サイズですが、横縦比を変える場合には、width: 200px; height: 200px; の横縦の比率で高さの数値で調整します。4：3の場合はwidth: 200px; に対して、高さをheight: 150px; に変えます。

　基本的には、写真の表示サイズを変えたい(倍率を変えたい)場合は、写真のサイズを、px数を 200pxに対する比率で､全て同じ倍率を掛けます。
　例えば写真が4：3で9行目の幅を350pxにした場合には、幅の倍率が350/２０0=1.75ですから
4,5行目は width: 700px､height: 512.75px
10,11行目はwidth: 350px,height:350×3/4= 262.5px
17行目の(0, -43.3px, -75px)は(0, -75.78px, -131.25px)
28～33行目の86.6pxは151.55pxに、173.2pxは303.1pxに変えます。
　但し、5行目のheight：512.75pxはこのアニメーションが使う高さの領域を宣言しており、大きいままだと縦方向に空白が広がりますので、下に何かを表示する場合には動かして見て height値を調整します。

　設定を変えタイトルやBGMを追加し､画像のサイズも大きくして、全体の幅を900pxにした事例1はここから、事例2はここからご覧下さい。

通常の支部だよりの個別写真の表示サイズ 440×330px と同じで、支部だより風にアレンジした、事例1はここから事例は
ご覧下さい。

『ズームしながら、ふわっと表示が切り替わるスライドショー』
　西ノ谷さんから情報提供が有りました、【CSS】ズームしながら、ふわっと表示が切り替わるスライドショーを作ってみよう｜（株）くふうしずおか (note.com)を作って見ましょう

　　｢ズームしながら、ふわっと表示が切り替わるスライドショーを作ってみよう｣のWebページから、そのまま｢コピ－&ペースト｣して表示した結果をここに表示しますが、何故か5枚目、6枚目の写真はアドレスが間違っており表示されません。

｢ズームしながら、ふわっと表示が切り替わるスライドショー｣のhtmlファイルを以下に記載します。

1
2
3
4
5
6
7
8

###を皆さんの写真のフォルダー名/写真の名前に変えます。

｢ズームしながら、ふわっと表示が切り替わるスライドショー｣の説明分からのCSSファイルを下記に記載しますが、4つのCSSはそのまま繋いで、1つのCSSにします。
1つ目のCSS

.main_imgBox {
height: 680px;
overflow: hidden;
position: relative; }

2つ目のCSS

.main_img {
z-index:10;
opacity: 0;
width: 100%;
height: 680px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 36s 0s infinite;
animation: anime 36s 0s infinite; }

3つ目のCSS

.main_img:nth-of-type(2) {
-webkit-animation-delay: 6s;
animation-delay: 6s; }

.main_img:nth-of-type(3) {
-webkit-animation-delay: 12s;
animation-delay: 12s; }

.main_img:nth-of-type(4) {
-webkit-animation-delay: 18s;
animation-delay: 18s; }

.main_img:nth-of-type(5) {
-webkit-animation-delay: 24s;
animation-delay: 24s; }

.main_img:nth-of-type(6) {
-webkit-animation-delay: 30s;
animation-delay: 30s; }

4つ目のCSS

@keyframes anime {
0% {
opacity: 0;
}
8% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
transform: scale(1.2) ;
z-index:9;
}
100% { opacity: 0 }
}

　anime 36s 0s infinite：1周期の総表示時間は36秒で、delay: 6s：2番目以降は、6秒づつで現れるスライドが切り替わります。無期限に繰り返し、各画像は表示時間内に1倍から1.2倍にふわっと拡大表示されます。

　このスライドショーは｢全画面表示｣ですから、px数の倍率変更などは有りません。

　私の画像に変えた事例はここからご覧下さい。

　写真の説明文を追加した事例1はここから、事例2はここからご覧下さい。