真っ黒い画面からスタート・左右から画像がスクロール

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

 いきなり画面が、真っ黒になって「Loading 〇%」の表示が出て、驚かれたかもしれません。

実は、これも演出の一つなんです。驚いた方、すみませんでした。

今回は、前回に引き続き「ScrollTrigger」を使った画像表示の一例です。



スクロール・トリガーを使って画像が左右から

スクロールに応じてイベントを実行してくれる
JavaScriptのライブラリ「ScrollTrigger」を使ってみます。


Loading

0%

ScrollTrigger

を使う






 Hi everyone, nice to meet you,  from wakei
 皆さんこんにちわ!お世話になってます。わけい






画像は Unsplashにリンクしてテーマに沿った画像をランダムに表示しています。


 今回、画像は<li>タグを使って表示していますが、リストマークの「・」がどうやっても消えないので、苦労しました。

通常は、CSSの<ul>タグに「 list-style: none; 」を記述すると消えるのですが、どうやら原因は画像表示に対応していないようです。

最終的には、CSSの<li>タグに「 display:block; 」を記述することによって、リストマークの「・」の表示が消えました。

(これは、忘備録として記録しておきます。)


ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 45

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

この記事へのコメント

  • tor

    驚きました!
    気持玉ポチするたびにも真っ黒になって
    「Loading 〇%」の表示が出ましたよ。
    2020年06月21日 21:10
  • わけい

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

    驚かして申し訳ありません。
    きっとPCだかOSだかの調子が悪くなったのかと感じる方が多いかも知れませんね。
    これの返信コメントは初めて書いたのですが、その際にも真っ黒になって私も驚きました。(笑)

    タイトルには、後から「真っ黒い画面からスタート・」の文言を追加しました。
    これで、少しは驚き・不安が減少するかなと思ったのですが、私自身が驚いてしまうようでは、ダメですね。
    ・・・というか、そもそも驚いてもらうためのものなので、よかったんでしょうかね?
    きっと「書き込む」をポチすると真っ黒になるのかな?
    2020年06月21日 23:27
  • ゆの

    わけい様

    こんにちは(^^)
    これ、これ
    PC初心者には一番怖い画面です~!!!
    顔が青ざめます

    わんこのアルバム、可愛かったです♪
    2020年06月22日 12:28
  • わけい

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

    この画面、怖くて嫌ですね・・・一体どうなったんだろうと不安になります。
    驚かせてすみません。
    でも、驚いていただき、お陰様で目的は達したようです。(笑)

    これから返信コメントの「書き込む」をクリックするのですが、その際に私も驚くんですよ!
    2020年06月22日 17:46