🕴🏼 🏓 🦌 静的サイトに命を吹き込むためのCSSとJavaScriptのトリック 📀 👐🏿 👩🏾‍🌾

私は過去数週間自分のウェブサイトに取り組んでいて、それにいくつかのダイナミズムを与えたいと思っていました。この記事は、Webページの作成に関するものではありません。説明付きの既製のスニペットを紹介します。

JSの3Dアニメーション

最初のトリックは、JSの素晴らしい3D効果です。

ご覧のとおり、マウスポインタがこの「カード」の上を通過すると、その中の要素が3次元になります。

方法

最初にHTMLdivが作成されます。

<div class="card">
  <div class="header">
    <img src='image.png' alt="image">
  </div>
  <div class="info">
    <h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
    <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
  </div>
</div>

ここでは、メインクラス（カード）とカード内の他の2つのクラス（ヘッダーと情報）があります。ヘッダーは画像を含むクラス（この例ではMediumロゴ）になり、情報にはカード内のテキストが含まれます。次に、CSSを追加して、マップの見栄えを良くしましょう。

.card {
    transform-style: preserve-3d;
    min-height: 64vh;
    width: 20vw;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

ここで、高さ、幅、境界線、パディング、シャドウを宣言しました。ページを更新すると、結果が表示されます。最後のステップは、マウスをマップ上に置いたときに3D効果を実現することです。このために、私はJSを使用しました：

// declaring variables

const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");

// Animate In

card.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  title.style.transform = "translateZ(3px)";
  header.style.transform = "translateZ(3px) rotateZ(0deg)";
  description.style.transform = "translateZ(3px)";
});

// Animate Out

card.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  title.style.transform = "translateZ(0px)";
  header.style.transform = "translateZ(0px) rotateZ(0deg)";
  description.style.transform = "translateZ(0px)";
});

変数を宣言します。
カード用に2つのイベントリスナーを作成します。
mouseenterで、タイトル、ヘッダー、説明をZから3ピクセルに変換します。これらの要素を回転させるかどうかを決定することもできます（rotateZ）。
マウスリーブで、すべてを通常に戻します。

それだけです。美しい3Dアニメーションがあります。もちろん今は生です。CSSをどこにでも追加して、幅や色などを変更できます。

背景アニメーション用のVanta.jsをご覧ください

Webページの背景の静的な色や画像にうんざりしていませんか？ VantaJsは、背景に命を吹き込むように設計されています。

方法それは

非常に簡単です。次のコードをHTMLに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
  VANTA.GLOBE({
  el: "#htmlid",
  mouseControls: true,
  touchControls: true,
  gyroControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
  })
</script>

これにより、Vanta.jsGlobeの背景がhtmlidに設定されます。

Vanta.jsには13のビルド済みの背景があります

それらを切り替えるには、VANTA.GLOBEをVANTA。[Backgroundname]に変更します。もちろん、その前に対応するcdn.jsdelivr.net/npm/vanta@latest/dist/vantaを追加する必要があります。[背景名] .min.js。

ScrollReveal

この素晴らしいJSライブラリについて知らなかった人のために、 ScrollRevealは、Webページを下にスクロールするときに要素を表示できます。

それがどのように行われるか

HTMLのヘッダーに追加します。
JSファイルに次のように書き込みます。

ScrollReveal().reveal('.htmlclass',{ delay: 400 })

このコードは、ページのスクロールで400ミリ秒の遅延があるクラス.htmlclassの要素を表示します。

文字のサイズと色を変更する

この小さなCSSトリックは、正しく使用すると非常に印象的です。

方法

いくつかの新しいHTMLスパン要素を作成し、それらのクラスを指定します。

<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>

3. CSSを適用する：ホバーすると、文字のサイズと色が変更されます。


.blast:hover {
    color:#08fdd8;
    font-size: 30px;
}

文字にカーソルを合わせると、サイズと色がどのように変化するかがわかります。さらにダイナミックな効果を実現するには、サイズと色が異なる文字ごとに個別のクラスを作成することをお勧めします。または、CSS：ホバーをHTMLのすべての要素タイプに適用することもできます。たとえば、お問い合わせフォームにも適用しました。

アニメーションプロパティ

Chris Coyerの記事から、プロパティの説明を資料に追加しました。

CSSのanimationプロパティを使用して、color、 background-color、 height、 widthなどの他の多くのCSSプロパティをアニメーション化できます。各アニメーションは@keyframesを使用して定義する必要があります。これは、次に、animationプロパティを使用して呼び出されます。次に例を示します。

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

各@keyframesルールは、アニメーションの特定のポイントで何が発生するかを定義します。たとえば、0％はアニメーションの開始であり、100％は終了です。これらのキーフレームは、アニメーションの省略形プロパティまたはその8つのサブプロパティのいずれかで操作して、キーフレームをより細かく制御できます。

サブプロパティ

Animation-name：制御する@keyframesルールの名前を宣言します。
アニメーション期間：1アニメーションサイクルの期間。
Animation-time-function：イーズやリニアなどの事前定義された加速曲線を設定します。
Animation-delay：要素のロードからアニメーションシーケンスの開始までの時間（興味深い例）。
Animation-direction：ループ後のアニメーションの方向を設定します。デフォルト値はサイクルごとにリセットされます。
Animation-iteration-count：アニメーションを実行する回数。
アニメーション-塗りつぶしモード：アニメーションの前後に適用される値を設定します。

たとえば、アニメーションの最後の状態を画面に表示したままにするように設定したり、アニメーションの開始時に元に戻すように設定したりできます。
アニメーション-再生-状態：アニメーションを一時停止/再生します。

次に、これらのサブプロパティを次のように適用できます。

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

これらのネストされたプロパティのそれぞれが取ることができる値の完全なリストは次のとおりです：

`animation-timing-function`	イーズ、イーズアウト、イーズイン、イーズインアウト、リニア、キュービックベジエ（x1、y1、x2、y2）（例：キュービックベジエ（0.5、0.2、0.3、1.0））
`animation-duration`	XsまたはXms
`animation-delay`	XsまたはXms
`animation-iteration-count`	バツ
`animation-fill-mode`	前方、後方、両方、なし
`animation-direction`	通常、代替
`animation-play-state`	一時停止、実行中、実行中

いくつかのステップ

アニメーションの開始プロパティと終了プロパティが同じである場合は、@ keyframe内の0％値と100％値をコンマで区切ると便利です。

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

複数のアニメーション

値をコンマで区切って、セレクターで複数のアニメーションを宣言することもできます。以下の例では、@ keyframe内の円の色を変更しながら、別のプロパティで円を左右に移動します。

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

パフォーマンス

ほとんどのプロパティのアニメーション化はパフォーマンスの問題であるため、プロパティをアニメーション化する前に注意する必要があります。ただし、安全にアニメーション化できる特定の組み合わせがあります。

変換：変換（）
変換：スケール（）
変換：回転（）
不透明度

どのプロパティをアニメートできますか？

MDNには、アニメーション化できるCSSプロパティのリストがあります。それらは色と数字になる傾向があります。アニメーション化されていないプロパティの例は、background-imageです。

詳しくは

MDN.
CSS.
W3C.
Jank busting .
- .
.
, , .
CSS .

ブラウザのサポート

このブラウザサポートデータは、詳細についてCaniuseWebサイトから取得されます。この数字は、ブラウザがこのバージョン以降の機能をサポートしていることを意味します。

テーブルトップ

クロム	Firefox	IE	縁	サファリ
4 *	5 *	十	12	5.1 *

モバイル

Android Chrome	Android Firefox	アンドロイド	iOSサファリ
87	83	4 *	6.0-6.1 *

プレフィックス

最新のブラウザでのこのプロパティのサポートは十分ですが、できるだけ多くの古いブラウザをサポートしたい場合があります。この場合、ベンダープレフィックスを使用する必要があります。

.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}

@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

これらのトリックは、あなたの名刺サイトやあなたが取り組んでいるペットプロジェクトのサイトに命を吹き込むのに最適です。あなたがあなた自身のトリックを持っているならば、私はあなたがコメントでそれらを共有することを勧めます。また、バナーに示されているものにさらに10％の割引を提供するHABRプロモーションコードを忘れないでください。

その他の職業やコース

静的サイトに命を吹き込むためのCSSとJavaScriptのトリック