これはフロントエンド チャレンジ - 12 月版、Glam Up My Markup: Winter Solstice への提出です

???? 簡単な紹介(私が作ったものについて)

「Winter Solstice Web」へようこそ。この Web サイトは、冬をテーマにした美しく作られたウェブサイトで、冷ややかな、そして天上のようなデザインを提供しています。これは、冬至のテーマ、クリスマスの精神、降雪からインスピレーションを得たものです。このサイトは、ユーザーにとってスムーズなスクロールとインタラクティブな機能を兼ね備えています。

?ライブデモ

私のコードリンク - https://github.com/Divya4879/Winter-solistice_web-glam.git

ライブサイト - https://divya4879.github.io/Winter-solistice_web-glam

私のコードサイトのプレビュー:-
https://codepen.io/divya-2002/pen/xbKgYZY

この記事を気に入っていただき、この季節(jié)の凍てつく天気や寒さを感じて、ここで冬至イベントの事実について知っていただければ幸いです。

?????デザイン

このウェブサイトは冬至をテーマにデザインされており、冷ややかな青、白、暗い背景のクールな (文字通りにも比喩的にも??) カラーパレットが使用されています。全體としてアニメーションの雪の背景を追加し、すべてのセクションに降雪を加えて魅力を高めました。また、可読性を確保し、コントラストを高めるためにセクションに透明なオーバーレイを使用し、見出しにテキストの影を付けました。

???? 主な特徴

私が本當(dāng)に気に入って熱心に取り組んだウェブサイトの主な機能のいくつかは次のとおりです:-

1. スムーズスクロールと視差効果: これには GSAP 連続スクロール機能を使用しました。これにより、ユーザーはセクションを上下にスクロールするときにスムーズなスクロール動作を體験できるようになります。

2. ヘッダーとナビゲーション: ユーザーがサイト內(nèi)を移動するときにナビゲーション バーが所定の位置に固定/スタックされるように、スティッキー ヘッダーを追加しました。ナビゲーションに関しては、レスポンシブにしました。さまざまな畫面サイズに応じてさまざまなレイアウトが用意されています。また、ナビゲーションバーにホバー効果をいくつか使用して、さらに魅力的なタッチを加えました。

3. モバイルの応答性: サイトのさまざまな畫面サイズに応答できるように、Flexbox と垂直ナビゲーション バーを使用しました。

4. 冬をテーマにしたアニメーション/エフェクト: 背景として雪のアニメーションを追加して、サイト全體の冬テーマを作成しました。また、すべてのセクションに、少し風(fēng)変わりだが楽しい「降雪」を個別に追加しました。

5. タイポグラフィと色: このチャレンジでは、Google フォントの「Cinzel」「Itim」「Mountains of Christmas」などの新しいフォントをいくつか試して使用しました。ウェブサイト全體のカラーテーマには、青や白、紫などの冬をテーマにした色とそのさまざまな色合いが含まれています。

6. カスタム アニメーションと効果: サイト全體にアニメーションやスクロール効果などを追加して、サイトにモダンな雰囲気を與え、人々にサイト全體を探索してもらいやすくしました。

????? 私の旅 – 學(xué)び、最高の時も最低な時も

正直に言うと、これは私にとってとても勉強になりました。これまで GSAP を使用したことがなかったので、いくつかの基本と基盤をブラッシュアップし、希望することが可能かどうかを調(diào)査し、はい、どのようにして試し、正しく機能するように何度も変更する必要がありました。

それは私にとって素晴らしい學(xué)習(xí)と創(chuàng)造的な経験でした。とても多くのことを?qū)Wび、徹夜で完成させて提出し、多くのことを試し、最終的にこれを構(gòu)築しました。

??この挑戦から何を?qū)Wんだのか??

このチャレンジを行ったおかげで、次のことができました:-

1. スクロール アニメーション スキルを鍛えます (GSAP)。

2. ウェブサイトの「インタラクティブ」部分を強化、改善、実踐します。

3. 冬至に関する多くの楽しい事実を知ることができ、また、特定のテーマに沿ったフォントとカラーパレットについて調(diào)べることができました。

4. CSS スキルを練習(xí)し、JS パーツについて練習(xí)して學(xué)習(xí)しました ->降雪、スクロールアニメーション、DOM 操作。

5. Web 開発の基礎(chǔ)である HTML、CSS、JS を使用して、美しい雰囲気とインタラクティブで機能的な Web サイトを作成します。

メインコンテンツはすでにテンプレート HTML として用意されていたことはわかっていますが、私のデザインは作成中に何度も繰り返されました。私にとって素晴らしい経験になりました。

???なぜ「冬至ウェブ」という名前なのでしょうか？

正直に言うと、あまり考える必要はありませんが、これは冬至の前夜に基づいており、その基本情報に関する Web サイトであるためです。

???? 結(jié)論

私がこのチャレンジを始めたのは、基本的なフロントエンド スキルを練習(xí)したかったからであり、常に「Dev.to チャレンジ」に參加したいと思っていたからです。この間、私は非常に熱中し、陽気で、期待し、幸せで、イライラし、失望し、満足していました。この「Winter Solstice Web」は私にとって単なるプロジェクトではなく、その作成中に私が経験した旅を思い出させ、美しい冷ややかなテーマの Web Solstice イベントをベースにした私の作品です。

うんざりしなければいいのですが、どのプラットフォームでも自分のプロジェクトについてブログを書くのは初めてです。
また、この作品を作っている間、私は素晴らしい旅をしました。私がこの作品を作ったのと同じくらい楽しんでいただければ幸いです。

???フィードバック

前に述べたように、私はこのプラットフォームで初めてプロジェクトを提出した者であり、これまでそのようなブログを書いたこともありません。

私の Winter Solstice Web および/または私のブログに関するフィードバックを心よりお待ちしております。以下のコメント欄でご意見をお聞かせください。

ここまで読んでくださった方、ありがとうございます。私のブログ、できれば私のウェブサイトにも貴重な時間を割いていただき、ありがとうございます。

以上が????冬至ウェブ: 冬至にインスピレーションを得たウェブページ????の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。