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

　第98日目開催：2024年 8月29日

　今回の勉強会では『CSSだけで作る「回転する3Dバナー/ vol3 6面の横回転サンプル色々」(コピペOK)』の3番目の項目である『ふわっと広がるループアニメーション』について勉強しましょう

　勉強会当日に、『6面_④風車のように回るアニメーション』も勉強しました。その説明資料を追加しました。

事前準備：
　今回のスライドショー用に600×450pxの写真を6枚準備して下さい。前回の写真でもOKですが、皆さんのHPに新しくアップして頂くために、新しい写真を準備して下さい。

｢Wayback Machine｣から『6面_③ふわっと広がるループアニメの作成』
　前回の勉強会の資料にも書いたように、色んな回転をしながら写真を表示する手法を5年以上探していました。やっと出会えたスライドショーのサイトは今では豹変してしまいました。
　先日までは、2020年8月16日公開のページそのものは有ったのですが、8/22に検索すると下図の様に表示されてしまい、ページが無くなってしまいました。

　今回も。『Internet Archive Wayback Machine』にバックアップされた過去のページから、『CSSだけで作る「回転する3Dバナー」』の、6面_③フワッと広がるループアニメーション,をご覧になり、6面のスライドショーを作って見て下さい。

　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

ul.t3 {
animation: anime3 5s linear infinite;
transform: rotateX(-15deg);
transform-origin: center;
width: 370px;
height: 235px;
}
.t3 li {
animation: anime3b 6s linear infinite;
width: 140px;
height: 105px; /*　写真が4：3なので140から105に変えた　*/
}
@keyframes anime3 {
0% {transform: rotateX(-15deg) rotateY(0); }
100% {transform: rotateX(-15deg) rotateY(-360deg); }
}
@keyframes anime3b {
0% {transform-origin: center;}
20% {transform-origin: center center -50px;}
40% {transform-origin: center center -50px;}
60% {transform-origin: center;}
100% {transform-origin: center;}
}
.t3 .face1 {transform: translate3d(calc(-25% + 45px), 60px, 60.62px) rotateY(-60deg); }
.t3 .face2 {transform: translate3d(calc( 50% + 45px), 60px, 121.24px); }
.t3 .face3 {transform: translate3d(calc(125% + 45px), 60px, 60.62px) rotateY(60deg); }
.t3 .face4 {transform: translate3d(calc(125% + 45px), 60px, -60.62px) rotateY(-240deg); }
.t3 .face5 {transform: translate3d(calc( 50% + 45px), 60px, -121.24px) rotateY(180deg); }
.t3 .face6 {transform: translate3d(calc(-25% + 45px), 60px, -60.62px) rotateY(240deg); }

　ul.t3 に記載されている2行目のanime3の 5sは1回転の時間。 5，6行目のwidth: 370px; height: 235px; は6枚の写真が回転しながら広がって表示される全領域。

　.t3 li に記載されている9行目のanime3bに記載されている 6sは写真がふわっと離れる時の周期時間。 10,11行目のwidth: 140px; height: 140px; はオリジナルの写真の表示サイズですが、横縦比を変える場合には、width: 140px; height: 140px; の横縦の比率で高さの数値で調整します。4：3の場合はwidth: 140px; に対して、高さをheight: 105px; に変えます。

　anime3bでは19,20行目で周期的にある期間に画像を､Z方向に -50px 移動させる事により、写真を周期的に遠ざけたり、正6角形に戻しています。

　基本的には、写真の表示サイズを変えたい(倍率を変えたい)場合は、写真のサイズを、px数を 140pxに対する比率で､全て同じ倍率を掛けます。
　例えば写真が4：3で9行目を350pxにした場合には、幅の倍率が350/140=2.5ですから
5,6行目は width: 925px､height: 440.6px
10,11行目はwidth: 350px,height:350×3/4= 262.5px
24～29行目の60.62pxは151.55pxに、121.24pxは303.1pxに変えます。
19,20行目の-50pxを小さくした場合にはwidthが925pcより小さくなりますが、そのままでも問題ありません。
　但し、height：440.6pxはこのアニメーションが使う領域を宣言しており、大きいままだと縦方向に空白が広がりますので、下に何かを表示する場合には動かして見て height値を調整します。

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

支部だより風にアレンジした
表示サイズ 280×210px で 19,20行の px数を -100pxに設定した事例はここから、
表示サイズ 350×262.5px で 19,20行の px数を -60pxに設定した事例はここから、
表示サイズ 400×300px で 19,20行の px数を -30pxに設定した事例はここから、
通常の支部だよりの個別写真の表示サイズ 440×330px と同じで、写真の広がりと中心軸のずれもなくした事例はここからご覧下さい。

｢Wayback Machine｣から『6面_④風車のように回るアニメの作成』
　『Internet Archive Wayback Machine』にバックアップされた過去のページから、『CSSだけで作る「回転する3Dバナー」』の、6面_④風車のように回るアニメーション,をご覧になり、6面のスライドショーを作って見て下さい。

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

1Link
2
3
4
5
6

④風車のように回るアニメーションのhtmlファイル

1
2
3
4
5
6
7
8
9
10
11
12

4行目のt0をt4に変える。
[START][STOP]ボタンを使用しない場合は2行目を削除する。

共通CSSの写真のフォルダーおよび写真の名前を、準備したフォルダー名、写真名に変える。
④風車のように回るアニメーションの専用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
31

ul.t4 {
animation: anime4 5s linear infinite;
transform: rotateX(-20deg);
width: 280px;
height: 230px;
}
.t4 li {
animation: anime4b 5s ease-in infinite;
width: 140px;
height: 140px;
}
.t4 li:hover::before {
content: '▶';
background-color: #000;
display: block;
line-height: 2;
position: absolute;
right: 100%;
height: 100%;
width: 2em
}
@keyframes anime4 {
0% {transform: rotateX(-20deg) rotateY(0); }
100% {transform: rotateX(-20deg) rotateY(-360deg); transform-origin: center; }
}
.t4 .face1 {transform: translate3d(0, 45px, 0); transform-origin: top right; }
.t4 .face2 {transform: translate3d(0, 45px, 0) rotateY(60deg); transform-origin: bottom right; }
.t4 .face3 {transform: translate3d(150%, 45px, 121.24px) rotateY(120deg); transform-origin: top left; }
.t4 .face4 {transform: translate3d(200% , 45px, 0) rotateY(180deg); transform-origin: top left; }
.t4 .face5 {transform: translate3d(150%, 45px, -121.24px) rotateY(240deg); transform-origin: top left; }
.t4 .face6 {transform: translate3d(50%, 45px, -121.24px) rotateY(300deg); transform-origin: top left; }

　ul.t4 に記載されている2行目のanime4、8行目のanime4bの 5sは1回転の時間。 5，6行目のwidth: 280px; height: 230px; は6枚の写真が回転しながら回って表示される全領域。
　9,10行目のwidth: 140px; height: 140px; はオリジナルの写真の表示サイズですが、横縦比を変える場合には、width: 140px; height: 140px; の横縦の比率で高さの数値で調整します。4：3の場合はwidth: 140px; に対して、高さをheight: 105px; に変えます。

　基本的には、写真の表示サイズを変えたい(倍率を変えたい)場合は、写真のサイズを、px数を 140pxに対する比率で､全て同じ倍率を掛けます。

　例えば写真が4：3で9行目を350pxにした場合には、幅の倍率が350/140=2.5ですから
5,6行目は width: 700px､height: 575px
10,11行目はwidth: 350px,height:350×3/4= 262.5px
26～31行目の45pxは112.5pxに、121.24pxは303.1pxに変えます。
　但し、6行目の height：575pxはこのアニメーションが使う領域を宣言しており、大きいままだと縦方向に空白が広がりますので、下に何かを表示する場合には動かして見て height値を調整します。

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

通常の支部だよりの写真サイズ 440×330px と同じサイズの写真を使用した、支部だより風の事例はここからご覧下さい。