ホームページ

ホーム・スキーマ

n/a.計画

最適化背景画像
背景-画像の波のアニメーションページ読み込み時にポップアップされるアニメーションスクロール時に消えるタイトルハンバーガーメニューをクリックするとメニュー-navis-active

背景→画像の最適化

Webpackのimageminプラグインでこの問題を解決しようとしたが、圧縮エラーで容量が思ったほど小さくなかったので適用しなかった...ううう
その後、私たちは直接ファイルに触れることで問題を解決しなければなりません.
(あとでこの部分はデザイナーや写真を送った人が解決しなければならない問題だと聞きましたが...ははは)

Lazy-Loading

完全に画像最適化技術とは言えないが,スクリーン上のコンテンツを特定のトリガにロードするLazy−Loading技術も試みた.
最新のChromeブラウザでは、imgタグのloading="lazy"プロパティのみを適用してサポートされています.
他のブラウザはJSに直接制御する必要がありますが、IntersectionLoaded Event Reserverクラスを使用して、ブラウザがすべてのHTMLを読み取り、DOMツリーを完了した直後に発生するDOMContLoadedイベントを実現したり、ビューポートと交差する領域の変化を非同期で検出したりすることができます.

背景→画像の下の波のアニメーション

無限移動なので、アニメーションの無限属性を使って創作することにしました.
自然な移動のために波形のsvgファイルを作成し、2つを重ねて、1つは左に押して、1つは上下に移動して、左に押して、アニメーションを完成します!
しかし,還流を減らすためにtranslate属性を用いたため,波が交互に繰り返される現象が現れ,marging−leftに触れざるを得なかった.ううう
これからの間違いを解決して、訂正したいです.

ページ読み込み時のサージアニメーション

最初はちょっと迷ったけど
これはかなりダイナミックなアニメーションで、大量の再描画を招く可能性があり、性能面の問題は解決されていない.これは波形svgをtransvgに大幅に減少させ、transvgをtransyに大幅に増加させることによって実現される.
次に、パフォーマンスに影響を与えずに劇的なアニメーションを制御する方法を学びます.

スクロール時に表示されない見出し

このセクションは、最後にJSのイベントリスナーにスクロールされます.window.__scrollPosition = document.documentElement.scrollTop || 0;を再割り当てし,現在のスクロール値の伝達を継続し,ヘッダの消失(下降)とヘッダの減少(上昇)により解決した.

ハンバーガーメニュークリック時メニュー-navis-active

JSの勉強を始めたばかりの頃は、DOMコントロール自体だけではもう難しいので、インライン方式でstyleをコントロールしていましたが、ずっと勉強していて、表記を汚したくないので、クラスに調整しました.

.is-active {
	display: block
}

この機能は、JSがis-activeクラスを削除、追加する形で実現されています.