にゃんこスライダー

• 
• 
• 
• 

｢macOS Sonoma｣（14.0）にアップグレードしたら、｢Photos｣ アプリでペット（ネコ）のインデックスが自動的に作成された。サイドバーにある ｢People｣ という項目が ｢People & Pets｣ に変更されて、いつの間にか ｢Memories｣ に年・月・日別や固有のネコ別（Pet Friends）のアルバムが多数追加されている。インデックスの作成はバックグラウンドで行われているようで、数日経ってから更新通知が表示されたりするのだ。たとえば ｢January 3 2018｣ というサムネイルをダブルクリックすると、BGM付きのスライドショー（レナち ゃんたちの写真13枚）がスタートする。音源は ｢Music｣ アプリのプレヴューと連携しているようで、オンラインでないと機能しない。整理整頓に横着なユーザにとっては嬉しい新機能である。音楽やニュース・サイトでは良くある表示スタイルだが、CSSだけで作れる方法を紹介しているサイト ｢マンガでわかるホームページ作成｣ に倣って、拙ブログにもスライドショーを設置した。〈メモリアル・キャッツ〉は虹の橋を渡ったネコたちの想い出のアルバム。第１集はロンちゃん（2012-2023）、第2集はドミノちゃん（2012-2019）です。

　　　　　　　　　　　　　　　　　　　　＊

■ CSSだけで自動再生スライドショー（｢マンガでわかるホームページ作成｣ から引用）

特徴
• 自動でスライド
• aタグ（画像リンク）あり・なし、どっちでも可


• マウスオーバーでスライドストップ
• 画像を増減するとき再計算し、CSS調整が必要

計算
• 計算が必要なので以下の定義をもとに数式を当てはめてください。
• 1枚表示させたい時間=a秒
• 切り替え時間=b秒
• 画像の数=c枚
• 画像の順＝n番目


• なお下記例では以下の数値となっています。
• 1枚表示させたい時間=3秒
• 切り替え時間=0.5秒
• 画像の数=4枚

　　　　　　　　　　　　　　　　　　　　＊

・html（Kitten Slider Version）

<div id="memory">
<ul>
<li class="memorycat"><a href="https://sknys.seesaa.net/article/2023-11-06.html"><img class="photonex" src="https://blog.ss-blog.jp/_images/blog/_fc3/sknys/DSC02288X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 3.5s"><a href="https://sknys.seesaa.net/article/2023-12-16.html"><img class="photonex" src="https://blog.ss-blog.jp/_images/blog/_fc3/sknys/DSC05755X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 7s"><a href="https://sknys.seesaa.net/article/2024-04-16.html"><img class="photonex" src="https://blog.ss-blog.jp/_images/blog/_fc3/sknys/DSC04494X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 10.5s"><a href=""><img class="photonex" src="https://blog.ss-blog.jp/_images/blog/_fc3/sknys/DSC04216X.jpg"></a></li>
</ul>
</div>

<ul>
<li><a href="#1"><img src="1.jpg"></a></li>
<li style="animation-delay: 3.5s"><a href="#2"><img src="2.jpg"></a></li><!--(a+b)×(n-1)-->
<li style="animation-delay: 7s"><a href="#3"><img src="3"></a></li>
<li style="animation-delay: 10.5s"><a href="#4"><img src="4.jpg"></a></li>
</ul>

• animation-delay：◎s（前のスライドが終わるまで待つ）
• ◎＝（1枚表示させたい時間 + 切り替え時間）×（画像の順 - 1）

・CSS（Kitten Slider Version）

<style>
#memory ul{list-style: none; position: relative;}
#memory li{position: absolute; top: 0; left: 0; width: 100%; z-index: 0;}
.memorycat img{display: block; max-width: 100%; height: auto;}
#memory li{animation: slide 14s infinite;/* (a+b)×c=x */ opacity: 0;}
@keyframes slide {0%{opacity: 0;}
3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
25%{opacity: 1;}/* 100÷c=z */
28.5%{opacity: 0;z-index: 0;}/* y+z */}
#memory ul:hover li{animation-play-state:paused;/* マウスを載せると一時停止 */}
#memory li:first-child{position:relative; left:-40px}

.photonex{border: solid 1px #cccccc; background-color: #ffffff; padding: 10px; margin-left: 14px; border-radius: 10px; box-shadow: 5px 5px 10px #808080;/* 画像に白枠と陰影を付ける */ width: 480px; height: 320px;}
</style>

<style>
ul{list-style: none; position: relative;}
li{position: absolute; top: 0; left: 0; width: 100%; z-index: 0;}
img{display: block; max-width: 100%; height: auto;}
li{animation: slide 14s infinite;/* (a+b)×c=x */ opacity: 0;}
@keyframes slide{0%{opacity: 0;}
3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
25%{opacity: 1;}/* 100÷c=z */
28.5%{opacity: 0;z-index: 0;}/* y+z */}
ul:hover li{animation-play-state:paused;/* マウスを載せると一時停止 */}
li:first-child{position:relative;}
<style>

• animation：△s（スライド1周の時間）
• △＝（1枚表示させたい時間 + 切り替え時間）× 画像の数


• @keyframes　2個目の%は切り替え時間の割合
• 切り替え時間 秒 ÷ △秒 × 100%


• @keyframes　3個目の%は1つ目のスライド終了の割合
• 100％ ÷ 画像の数


• @keyframes　4個目の%は上記2つの合計
• （切り替え時間 秒 ÷ △秒 × 100%）+（100％ ÷ 画像の数）

　　　　　　　　　　　　　　　　　　　　＊

• ｢CSSだけで自動再生スライドショー｣ からの無断引用ですが、PRはしましたよ＾＾;


• ｢にゃんこスライダー｣ は引用元のCSS（スタイルシート）を少々アレンジしています


• 〈メモリアル・キャッツ 2〉に伴い、記事の一部を修整しました（2023･12･30）

　　　　　　　　　　　　　　　　　　　　＊

kitten slider / memorial cats 1 / 2 / sknynx 1169

htmlやCSSをマンガで楽しく学ぼう

• 著者：テイク
• 価格：1980円
• 発売日：2022/07/14
• メディア：コミック
• 内容：htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です