にゃんこスライダー [s k i n]
「macOS Sonoma」(14.0)にアップグレードしたら、「Photos」 アプリでペット(ネコ)のインデックスが自動的に作成された。サイドバーにある 「People」 という項目が 「People & Pets」 に変更されて、いつの間にか 「Memories」 に年・月・日別や固有のネコ別(Pet Friends)のアルバムが多数追加されている。インデックスの作成はバックグラウンドで行われているようで、数日経ってから更新通知が表示されたりするのだ。たとえば 「January 3 2018」 というサムネイルをダブルクリックすると、BGM付きのスライドショー(レナち ゃんたちの写真13枚)がスタートする。音源は 「Music」 アプリのプレヴューと連携しているようで、オンラインでないと機能しない。整理整頓に横着なユーザにとっては嬉しい新機能である。音楽やニュース・サイトでは良くある表示スタイルだが、CSSだけで作れる方法を紹介しているサイト 「マンガでわかるホームページ作成」 に倣って、拙ブログにもスライドショーを設置した。〈メモリアル・キャッツ〉は虹の橋を渡ったネコたちの想い出のアルバム。第1集はロンちゃん(2012-2023)、第2集はドミノちゃん(2012-2019)です。
*
- 特徴
- 自動でスライド
- 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.blog.ss-blog.jp/2023-11-06"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC02288X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 3.5s"><a href="https://sknys.blog.ss-blog.jp/2023-12-16"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC05755X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 7s"><a href="https://sknys.blog.ss-blog.jp/2024-04-16"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC04494X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 10.5s"><a href=""><img class="photonex" src="/_images/blog/_fc3/sknys/DSC04216X.jpg"></a></li>
</ul>
</div>
<ul>
<li class="memorycat"><a href="https://sknys.blog.ss-blog.jp/2023-11-06"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC02288X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 3.5s"><a href="https://sknys.blog.ss-blog.jp/2023-12-16"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC05755X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 7s"><a href="https://sknys.blog.ss-blog.jp/2024-04-16"><img class="photonex" src="/_images/blog/_fc3/sknys/DSC04494X.jpg"></a></li>
<li class="memorycat" style="animation-delay: 10.5s"><a href=""><img class="photonex" src="/_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>
<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>
#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>
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
- 著者:テイク
- 価格:1980円
- 発売日:2022/07/14
- メディア:コミック
- 内容:htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です
2023-11-16 00:07
コメント(0)
SUBSCRIBED BLOGS 2 (5/28)