HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法

HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法

モバイル デバイスの普及と、Web サイトへのアクセス エクスペリエンスに対するユーザーの要件の高まりに伴い、デザイン応答性の高いスクロール通知バーの重要性がますます高まっています。レスポンシブ デザインにより、Web サイトがさまざまなデバイスで適切に表示され、ユーザーが通知コンテンツを簡単に表示できるようになります。この記事では、HTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法を紹介し、具体的なコード例を示します。

まず、HTML 構造を作成する必要があります。 HTML ファイルでは、ID を持つ要素を使用して通知バーのコンテンツを保持できます。例:

<div id="scrolling-news">
  <ul>
    <li>通知内容1</li>
    <li>通知内容2</li>
    <li>通知内容3</li>
    <li>通知内容4</li>
    <li>通知内容5</li>
  </ul>
</div>

次に、CSS を使用して通知バーのスタイルとレイアウトを定義する必要があります。次のスタイルを使用して、通知バーの基本スタイルを作成できます:

#scrolling-news {
  height: 40px;
  overflow: hidden;
}

#scrolling-news ul {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll 10s linear infinite;
}

#scrolling-news li {
  display: inline-block;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

上記のコードでは、通知バーの高さを 40px に設定し、そのオーバーフロー プロパティを hidden に設定して、スコープを超えたコンテンツを非表示にします。 。 Position:relative を使用して ul 要素の位置決め方法を設定し、そのリスト スタイルを none に設定してデフォルトのリスト スタイルを削除します。また、transform:translateY() を使用して、通知コンテンツを上下にスクロールするために、scroll という名前のアニメーションを定義しました。

jQuery を使用して、通知バーにインタラクティブなアクションを追加できます。 jQuery ライブラリを HTML ファイルに導入し、次のコードを使用します。

$(document).ready(function() {
  var scrollingNews = $('#scrolling-news');
  var newsItems = scrollingNews.find('li');
  var newsIndex = 0;

  function scrollNews() {
    scrollingNews.find('ul').animate({ marginTop: '-40px' }, 400, function() {
      $(this).css({ marginTop: '0' }).find('li:first').appendTo(this);
    });
  }

  setInterval(scrollNews, 3000);
});

上記のコードでは、まず jQuery セレクターを使用して、通知バーと通知コンテンツの要素を取得します。次に、scrollNews という関数を定義して、通知コンテンツのスクロール効果を実装します。この関数では、jQuery の animate() メソッドを使用して通知コンテンツを上下にスクロールし、スクロールが完了した後、最初の通知項目をリストの最後に移動します。最後に、setInterval() メソッドを使用して、scrollNews 関数を定期的に呼び出し、自動スクロール効果を実現します。

これで、Web ページを開くと、応答性の高いスクロール通知バーが表示されるはずです。通知の内容は一定の速度で上下にスクロールし、新しい通知が追加されると、自動的にスクロールして表示されます。

HTML、CSS、jQuery を使用すると、応答性の高いスクロール通知バーを簡単に作成できます。上記のサンプルコードは基本的な実装方法ですので、必要に応じてスタイルやレイアウトを変更したり、さらにインタラクティブな機能を追加したりすることができます。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQuery を使用して応答性の高いスクロール通知バーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。