グラムップクリケットのウェブサイト

これはフロントエンド チャレンジ v24.07.24、Glam Up My Markup: Recreation への提出です

皆さん、こんにちは!!

私が作ったもの

HTML、CSS、そして少しの jQuery と NYRLC 用の基本的な構造化レイアウトをすべて使用して、クールな読み込みアニメーションを作成しました。このサイトは、ロード時にユーザーの注目を集め、次に何が来るのかユーザーに興味を持たせ続けます。
また、バナー画像とカード ビューのコンテンツの書式設定を使用して Web サイトに構造を提供し、情報を簡潔かつ視覚的に魅力的に提供します。

デモ

旅

私は日常的にクリケットをプレーしているので、どちらのチャレンジも私にクリケットに向けて何かを構築するよう促しましたが、GlamUp チャレンジではファイルから HTML を追加する必要がなくなったことを考えると、少し挑戦的だと感じました。そこで私はそれを選択し、CSS と JS だけで Web サイトをより適切に構造化するにはどうすればよいかを考えました。そのとき初めて、インタラクティブ カードを使用して登録プロセスを示すことを思いつきました。実際には、それらはクリック可能で、ユーザーを次のアクションに導くことができます。フォームに記入します。構造を完成させて視覚的に魅力的なものにした後でも、まだクリケットの要素が欠けていると感じました。そこで思いついたのが、ローディング アニメーションを追加する必要があるかもしれません。最初はバット上で垂直に大きく弾むボールを追加しようと考えましたが、それは少し非アクティブで退屈になるだろうと思いました。
最も奇妙なことが起こったのは、インド対SA T20ワールドカップ決勝戦のハイライトを観ていたときで、そのイニングでジャスプリット・バムラがマルコ・ヤンセンを一掃したのを見たときが一番興奮したと感じたときだった。読み込みアニメーションを切り株がスラッシングされるようにしたいと考えています。それで、私はまったく止まらずに創作を続けました。最終的にはそのアイデアに満足しました。クリケットボールをアニメーション付きの「トップにスクロール」ボタンにするなど、いくつかのアイデアがまだ頭の中にありました。しかし、私はそこに一線を引いて、そのまま応募することにしました。
気に入っていただけると幸いです。

以上がグラムップクリケットのウェブサイトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。