CSS をマスターする：応答型 Web デザイン | インタラクティブコンポーネント

はじめに

この実験では、CSS プロパティとセレクタを適用して視覚的に魅力的で応答性の高い Web ページを作成する方法を学びます。最新の CSS 機能、すなわちフレックスボックス、グリッド、トランジション、アニメーションに関する実践的な経験を得ます。この実験が終了するとき、CSS を使用して動的なレイアウト、インタラクティブなコンポーネント、魅力的なユーザーエクスペリエンスを作成できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

シフトするカード

VM には既に index.html と style.css が用意されています。

マウスオーバー時にシフトするカードを作成するには、次の手順に従います。

.container 要素に適切な perspective を設定して、シフト効果を可能にします。
.card 要素の transform プロパティに対して transition を追加します。
Document.querySelector() を使用して .card 要素を選択し、mousemove と mouseout イベントに対するイベントリスナーを追加します。
Element.getBoundingClientRect() を使用して、.card 要素の x、y、width、および height を取得します。
x 軸と y 軸に対して相対距離を -1 と 1 の間の値として計算し、transform プロパティを通じて適用します。

ここにカードのサンプル HTML と CSS コードを示します。

<div class="container">
  <div class="shifting-card">
    <div class="content">
      <h3>Card</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
        repellat, consequuntur doloribus voluptate esse iure?
      </p>
    </div>
  </div>
</div>

.container {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  background: #f3f1fe;
  perspective: 1000px;
}

.shifting-card {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 0.5rem;
  transition: transform 0.2s ease-out;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.shifting-card.content {
  text-align: center;
  margin: 2rem;
  line-height: 1.5;
  color: #101010;
}

そして、ホバー効果を追加する JavaScript コードをここに示します。

const card = document.querySelector(".shifting-card");
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;

const handleMove = (e) => {
  const { pageX, pageY } = e;
  const dx = (cx - pageX) / (width / 2);
  const dy = (cy - pageY) / (height / 2);
  e.target.style.transform = `rotateX(${10 * dy * -1}deg) rotateY(${
    10 * dx
  }deg)`;
};

const handleOut = (e) => {
  e.target.style.transform = "initial";
};

card.addEventListener("mousemove", handleMove);
card.addEventListener("mouseout", handleOut);

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたはシフトするカードの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。

CSS を使った応答型 Web デザイン

はじめに

シフトするカード

まとめ