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

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

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


"真っ黒い画面からスタート・左右から画像がスクロール"へのコメントを書く

お名前:[必須入力]
メールアドレス:
ホームページアドレス:
コメント:[必須入力]