フロントエンド チャレンジへの提出物 (12 月&#)

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

私が作ったもの

Web サイトはここにあります: https://plutonium-239.github.io/dev.to-frontend-challenge/
私の目標は、与えられたプレーンな HTML をよりインタラクティブに、美しくすることでした。そして役に立つ?これを行うには、すべてのセクションに一貫したスタイルを追加し、重要な用語を強調表示して内容をより早く把握できるようにすると同時に、コントラストを追加しました。また、サイトをモバイル レイアウト用に最適化しました。インタラクションは少なくなりますが、サイトのテーマも同様に優れており、便利です。

デモ

ソース コードは https://github.com/plutonium-239/dev.to-frontend-challenge で公開されています

旅

テーマ/CSS

冬至は北半球で一年の中で最も日が短い日となるため、夜空をテーマにしたかったのです。そこで、私たちの旧友であるparticles.jsを思い出しました。ただし、メモリ リークの修正、最適化、typescript での書き換えが多数行われ、tsParticle に変換されました。これがページの背景を形成します。邪魔にならず、同時に生き生きとして見た目にも美しいように構成しました。このセットアップを行うのは予想外の苦労でした。最新バージョンには tsparticles.bundle.js があり、必要なものがすべて揃っているはずであり、グローバルをエクスポートするため、1 行で開始できるようになっていますが、そうではありませんでした。 tsparticles.engine.jsを使用しているときにセットアップを手動で呼び出そうとしましたが、役に立ちませんでした。これには有用なドキュメントが不足しているという問題があります。使用例が 1 つあるスリム版も試してみましたが、うまくいきませんでした。私はバージョンを古いバージョンに置き換えることだけを試みました (必要なのは主に基本的な動作であり、新しい機能ではなかったので) 1.43.1 で成功しました。 Readme の指示に従えば正常に動作すると思われるかもしれませんが、ここではそうではありません。

配色を選んだのは、ちょっと面白い偶然でした。 Tumblr の投稿/ミームのスクリーンショットを見たことがあり、その色がとても気に入りました。文字通り、Google レンズを通じて高解像度の画像を検索し、その色を抽出しました。これにより、3 つの基本色 (サーフェス、プライマリ、アクティブ) が提供されました。他の色については、1 つは赤とピンクの色合い、もう 1 つは緑がかった/ターコイズにしたいと思いました。この範囲からいくつかの色を選択し、現在のカラー パレットと一致するように色合いを合わせました。代替カラー パレットを試すための Colormind のような優れたツールについて学びました。

タイポグラフィに関しては、Readex Pro フォントのことはかなり前から知っていて、とても気に入っています。見出しの表示フォントとしても、通常のテキストのベース フォントとしても機能します。他にもいくつか (Noto、Raleway) を試しましたが、最終的に Readex Pro を使用することにしました。すべてのテキストに等幅フォントを使用することも考えましたが、このページのコンテンツはそのスタイルと互換性がありませんでした。

次は、スクロールによるアニメーションです。以前から実際のウェブサイトでこれらを使用したいと考えており、目次と見出しに含めました。 Firefox (まだ) がアニメーション範囲をサポートしていない (そして、スクロール駆動のアニメーション自体がフラグ ¹ の後ろでデフォルトで無効になっている) といういくつかの問題があったため、ハックを実装する必要がありました。 -ish 修正 (ただし、フラグを有効にする必要があります)。

コンテンツ/HTML (JS経由)/CSS

コンテンツの話になりますが、これを 2 つの方法で行いました。

1. JS を介してテキストにハイライトを追加 - 本質的には innerHTML を置き換える必要があり、気分が悪いですが、HTML を変更できないのはかなり制限的です。 また、JS を使用して要素を挿入して、紹介文に画像を追加しました。少しフェードイン効果を加えたかったのでこれを行いました。当初、セクションの ::after で CSS 背景を使用してこれを実行していましたが、さまざまなデスクトップ サイズやモバイルでフェードを一貫して (つまり、画像の上端が目に見えて鮮明にならないように) する必要がありました。不可能であることが判明した。そのため、セクションに新しい要素を追加し、画像自体に制約された ::after 疑似要素のスタイルを設定する必要がありました。これは非常にうまく機能しました。
2. CSS を使用してお祝いに画像を追加する - 4 つのお祝いのそれぞれについて、さまざまなソース (クレジットされている) から適切な画像を見つけ、疑似要素を使用して追加しました。素敵な視差スタイルを与え、ホバー操作時に完全な画像を表示する機能も追加しました。画像には多様性があるため、高解像度の画像を見つけるために最善を尽くし、ImageMagick を使用して幅が 800 ピクセルに統一されるようにサイズ変更しました。私は、.celebration クラスを利用してフレームワークを定義し、特定のお祝いごとに CSS 変数を使用して画像 URL (およびクレジット テキスト) を定義する賢い方法でこれを実装しました。

伝統ページでは、リスト マーカーをカスタムの @counter スタイルに変更しました (そして使い方を学びました)。これは非常に気の利いた機能です!

インタラクション: IntersectionObserver API を使用して、目次にスクロール インジケーターを追加しました。これは非常に簡単でした。交差をチェックし、クラスを設定するだけです!

お祝いリストの項目にはホバー効果もあり、それぞれの画像全体が表示されます。これは、CSS を使用して、::after のコンテンツとして画像を設定し、ホバー時に表示されるようにして行いました。

?ページの最後に素敵な秘密を追加したかもしれません?

これは、Canvas API とスクロール リスナーを利用します。とてもクールに見えますが、他のスタイリングにフィットするかどうかは 100% わかりませんでした。

結論

私は職業的に UI デザイナー/Web 開発者ではありません。実際、私は ML 研究者です。しかし、私はアプリやウェブサイトをデザインしたことがあり、クリエイティブであることが好きです!

それで、チャレンジの投稿を見たとき、面白いとは思いましたが、あまり真剣に取り組むつもりはないと思いました。しかし、上で説明したスクリーンショットと、古い粒子.js エフェクトを使用している Web サイトを偶然目にしたので、これら 2 つはある時点でクリックしたに違いありません。それをクリスマスの奇跡と呼びましょう。 ?

今後のステップは特に考えていませんが、やろうと思っていたことはすべてやり遂げたという感じです。

他の人の投稿をいくつか調べてみると、HTML を直接編集できないことがそれほど明確ではなかったと思います。私はこの設定ルールに従い、CSS のスクリプト タグとリンク タグのみを追加しました - 実際のマークアップ コンテンツは一切編集しません。

コードは MIT ライセンスに基づいて利用可能です。

---

1. Firefox/ベースのブラウザ (Zen など) を使用している場合は、about:config でlayout.css.scroll-driven-animations.enabled をオンにしてください ↩

以上がフロントエンド チャレンジへの提出物 (12 月&#)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。