Narriva - 伝統とお祝いに関するミニマリストのブログ**-jsチュートリアル-php.cn

Narriva - 伝統とお祝いに関するミニマリストのブログ**

Mary-Kate Olsen

リリース： 2024-12-27 21:17:13

オリジナル

288 人が閲覧しました

私が作ったもの

Narriva は、伝統とお祝いに焦点を当てるように設計された、ミニマリストで視覚的に魅力的なブログ Web サイトです。目標は、CSS と JavaScript を使用して、最新のデザイン原則、応答性の高いレイアウト、対話性を重視したブログサイトを作成することでした。

ブログはシンプルでありながらエレガントで、クリーンなインターフェイスと直感的なナビゲーションでコンテンツを紹介したいと考えていました。主な焦点は、機能を維持しながら、どのデバイスでも見た目が美しいことを保証することでした。

デモ

以下の私のプロジェクトをご覧ください:

プロジェクトコードリポジトリ

ライブデモ

ブログと投稿ページの簡単なプレビューは次のとおりです:

ホームページには、魅力的なナビゲーションバー、動的なブログヘッダー、すっきりとしたモダンなカードデザインの最近の投稿のグリッドが備えられています。
投稿ページでは、コンテンツの画像ベースのリスト、大きな特集画像、魅力的なセクションのデザインが紹介されています

Narriva - A Minimalist Blog for Traditions and Celebrations**

旅

セットアップ

このプロジェクトの基礎は、課題の要件を理解することから始まりました。私はブログのテーマを選ぶことから始めました。それは、視覚的に目立つもので、伝統やお祝いに興味のある読者の共感を呼ぶものです。ブレーンストーミングを行った結果、ストーリーテリングと文化の豊かさの感覚を呼び起こすブログのタイトルを「Narriva」に決定しました。

私はブログの構造を概略的に示し、次のような重要なコンポーネントをリストしました。

シームレスなブラウジングのための固定ナビゲーションバー。
魅力的なグラデーションと検索バーを備えたブログヘッダー。
インタラクティブなレイアウトを備えた最近のポストカード。
ページをまとめるフッターの統一感のあるデザイン。

重要な段階

設計と実装

デザインプロセスは、紫とピンクのグラデーションを加えた明るい色を使用して、洗練された視覚的に魅力的なレイアウトを作成することに重点を置きました。モダンな美しさを維持しながら、UI がアクセシビリティ標準に準拠していることを確認しました。主要なデザインのハイライトは次のとおりです:

ナビゲーションバー: ブログと投稿ページ全体で機能する、応答性の高い固定位置のナビゲーション。小さい画面向けの切り替え機能を備えています。
ヘッダーセクション: 視覚的なインパクトを与えるグラデーションテキスト効果を備えた大きな見出しと小見出し。
ブログポストカード: コンテンツと画像が分離されたユニークなカードで、統一感のあるデザインを維持しながら目立たせます。
投稿ページの機能強化: アコーディオンベースの目次、セクション画像、読みやすさへの重点などの動的な機能。

課題と解決策

重要な課題の 1 つは、デバイス間の応答性を確保することでした。 Chrome DevTools を使用するとテストには役立ちましたが、スケーリングと配置、特に固定位置のナビゲーションで問題が発生しました。これに対処するには:

CSS メディアクエリを利用して、さまざまな画面サイズに合わせてレイアウトを微調整しました。
ナビゲーションバーとコンテナ要素の構造を調整することで、位置の不一致をデバッグしました。

もう 1 つの課題は、モバイルナビゲーションバーの切り替え機能を実装することでした。イベントリスナーを使用してクラスを動的に切り替え、アニメーションとコンテンツの可視性を効果的に制御しました。

技術的なハイライト

CSS アニメーションとトランジション: アコーディオンとボタンの操作に生命を吹き込むために使用されます。
JavaScript 操作: モジュール性とスケーラビリティのために HTML 要素をクエリし、動的に挿入します。
画像の最適化: ビジュアルを損なうことなくパフォーマンスを確保するために、WebP などの最新形式で高品質で軽量の画像を使用することに重点を置いています。