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

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

　いきなり画面が、真っ黒になって「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; 」を記述することによって、リストマークの「・」の表示が消えました。

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

Comments

[tor]

驚きました！
気持玉ポチするたびにも真っ黒になって
「Loading 〇%」の表示が出ましたよ。

[わけい]

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

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

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

[ゆの]

わけい様

こんにちは（＾＾）
これ、これ
ＰＣ初心者には一番怖い画面です～！！！
顔が青ざめます

わんこのアルバム、可愛かったです♪

[わけい]

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

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

これから返信コメントの「書き込む」をクリックするのですが、その際に私も驚くんですよ！