SSブログ

にゃんこスライダー [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)です。

                    *

  • ■ 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.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=""><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>
    • 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% ÷ 画像の数)
                        *
                        *


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

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

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

    コメント(0)