横着な自動ページめくり

wakei02.jpg
画像は、わけいのコラージュより



写真集の自動ページめくり

ちょっと横着ですが、ページめくり自動操作機能付きの写真集です。
「画面左上の更新アイコン」or「F5キー」で次の写真集に変わります。

Turning pages

   ** Images loaded randomly from Picsum.photos



ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 167

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い 面白い
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • フラバーバ

    自動で ページが めくられて 楽ちんで
    いつの間にか 眠ってしまいそうです。
    あぁ 旅行に行きたくなりましたよ。
    2020年08月06日 10:36
  • つむぎ

    こんにちは~
    心地よいスピードで本がめくられる様子が
    とても楽しいです。
    いつもありがとうございます。
    2020年08月06日 15:30
  • わけい

    フラバーバさんへ
    コメントどうもありがとうございます。

    昼間は見ないようにして、夜ぐっすり寝ていただければ有難いです。
    旅行・・・、私はその言葉を忘れるぐらいしばらく行ってないです。
    考えてみたらコロナ以降は、隣街にも出かけていませんでした。
    おかげで、ガソリン代が安くつきます。
    2020年08月06日 18:29
  • わけい

    つむぎさんへ
    コメントどうもありがとうございます。

    心地よく感じていただき、嬉しいです。
    今日も暑かったですが、これからさらに暑くなりそうです。
    つむぎさんも(私も)何とか乗り越えられますように・・・ですね!
    2020年08月06日 18:35
  • tor

    これ良いですね。
    私のブログに使えないかな?
    ページをめくるスピードがまた絶妙です。
    2020年08月06日 19:41
  • yasu

    わけいさん、こんにちは。
    自動でめくれるアルバムですか。
    凄いですね。
    写真はご自分で撮られたものですか。
    いつもながら素晴らしいです。
    2020年08月07日 11:23
  • わけい

    torさんへ
    コメントどうもありがとうございます。

    torさんのブログでも表示可能ですが、torさんのブログの現在のレイアウトのままでは崩れる気がします。
    FC2の仕様は違うと思いますが、ご案内のようにウェブリブログのレイアウトは、真ん中と左右と上下に区分されています。
    現在の私のレイアウトは、上下はそのままですが、左右の部分は全て下に移動させました。
    (これは、ページごとの設定が出来ないので、ブログの記事全体に影響します。)
    ときに、「左・右+真ん中」を一つにして表示することがあるためにそのような設定に変えました。

    したがって、torさんの現在のブログのレイアウトを変えないで、表示するには工夫が必要だと思いますが、どのように修正したら表示できるかの確認のしようがないので、この作業はtorさんにお願いするしかなさそうです。

    この記事は見た目がシンプルで、HTML部分は短いですが、CSS部分はめちゃくちゃ長いです。
    このページめくりのオリジナルは、 https://codepen.io/amitsheen/details/WNweryv にあります。
    (使うかどうかは別にしても、一度覗いてみると参考になると思います)

    アニメーションする部分を概ね10%刻みで写真の枚数分×他のブラウザ用の記述があるので、とても長くなっています。
    他のブラウザ用の記述は削除すると40%ぐらい短くなり、私のPC環境では問題なく表示できました。
    ただ、念のためこの記事では削除していません。

    また、この記事では上下や背景に影響を与えないようにするために、「body」部分の記述を修正しています。
    torさんの環境でも、この「body」部分の記述を変えるだけで、表示できる気がするのですが、確信はありません。

    「body」は、記事全体の「body」に影響するので、
    私は「body」を「.wbody」というクラスにランクを下げて、
    「article class="wbody"」として使うことで記事全体に影響するのを回避しています。
    さらに、「.wbody」の記述にある「background-color:〇〇」を削除したり、「width:〇〇vw;」を加えたりして、私のPC上でうまく表示できるようにしていますが、スマホ上の表示はほとんど考えていません。
    2020年08月07日 13:48
  • わけい

    yasuさんへ
    コメントどうもありがとうございます。

    写真は、「Picsum.photos」というフリーの写真サイトにリンクして表示させています。
    このサイトにある大量の写真の中からサイズが「420×300」ピクセルの条件に合うものをランダムに表示しているので、ログインするたびに、見る人によって違う写真を見ていることになります。

    この記事の中に、『「画面左上の更新アイコン」「F5キー」で次の写真集に変わります。』と書いているのは、そういう仕組みになっているためです。

    試しに、「//picsum.photos/420/300?random」に移動すると何かしらの写真が表示されます、次にアクセスしたときは別の写真が表示されると思います。(選択して右クリック→〇〇に移動)
    420/300のサイズは適当に変えると、それに合致した写真が表示されます。
    なお、写真はプロ級の方の作品を無料で提供していて、対象範囲もとても広いです。
    「?random」を「?fruit」「?bird」「?animal」・・・など適当な言葉に変えるとそれに対応した写真が表示されると思います。

    外部の写真にリンクして表示しているので、自分のブログの写真置き場にはアップしていません。したがって容量は使っていないです。
    2020年08月07日 14:14
  • ゆの

    わけい様

    こんばんは(*'▽'*)
    ゆったりめくられるペースが心地よいリズムで、次ページが見えてくるタイミングもワクワク(≧∇≦)
    ずっと見ちゃいます〜
    2020年08月10日 20:56
  • わけい

    ゆのさんへ
    コメントどうもありがとうございます。

    写真集めくり、気に入っていただきどうもありがとうございます。

    この記事で、自分で感心した点があるのですが・・・
    それは、「~で次の写真集に変わります」・・・の表現です。
    現実には、「次の写真集」などは用意していませんが、「F5キー」を押すことで、あたかも「別の写真集」があるかのように
    変わりますので、実質嘘ではない、といえそうです。
    「次の写真集に変わります」の表現はいい思い付きだった、また使おう・・・などと考えてる次第です。
    (自画自賛ですみません)
    2020年08月11日 09:35