非表示デモHTMLCSSJavaScript次々にセクションが登場する仕組みセクションを生成するタイミングまとめデモまずはこちらのデモをご覧ください。</section></div>先程のデモを見る限り果てしなく長いHTMLを書いているのでは!?と想像した方もいるかもしれませんがそうではありません。セクションは3つのみです。仕組みはやはりJavaScriptにありそうですねCSS次にCSSです。skyblue;}JavaScript次にJavaScriptです。},});各行にコメント文を記載しているので一つ一つ追っていけば理解ができるかと思います次々にセクションが登場する仕組みこれは12行目~22行目のcreateSection関数によってセクションが次々に登場するような処理が行われる定義がされています特に13行目のJavaScriptのメソッド.createElementによってsectionタグが生成されているところが肝です関数となっているためこのcreateElement関数が呼び出される度にsectionタグを生成してコンテナ要素の中に追加、さらにはGSAPによってbackgroundColorとクラス名を付与しているという一連の流れを自動で行ってくれますセクションを生成するタイミングではこのセクションを追加する関数.createElementですがどのタイミングで呼び出されているのでしょうか?呼び出すタイミングはGSAPのScrollTriggerにて制御しております。ScrollTriggerに関する記述は24行~35行目です大事なのはコールバック関数onUpdateです。スクロールの方向が下方向であったときに.createElement関数を呼び出すという処理となっていますまとめいかがだったでしょうか。JavaScriptのメソッドであるHTMLを生成する.createElementやHTML要素を挿入する.appendChildを用いてセクションを追加する関数を作り、GSAPのScrollTriggerで生成タイミングをコントロールしているという大まかな流れを読み解いていきました。この無限に要素が生成されるのはSNS、特にTwitterなどの例が分かりやすいのではないでしょうかぜひ開発ツールを開いていただきスクロールするごとに要素が足されていくのを確認してみてください。なり小なりお仕事の総納品件数は100件以上。営業支援コミュニティCODOLIFEにてコーディング講座の講師を担当。