どのようなキューブに向かって円の間に一般的な、左右の周りに揺れる靴のペアは、そのキューブの慣性(はい、その物理学)、あなたのカーソルがそれを満たしているときに踊るテキスト、またはテキストフィールドとバンで物事を入力して踊っている!理由は理由のない地獄のように回転!
まあ、私も何を話している?┐(￣ヘ￣;)┌
私はいくつかの奇妙な超狂気のWeb体験をすることができます(私は上記の例を含む)だけであなたのウェブサイトにいくつかの楽しみを持っているか、慎重にウェブサイトの訪問者を喜ばせるためにそれらを実装することができますについて話しているジョイフル!
物事はクレイジーな相互作用でクールに見えることができるこのJavaScriptライブラリを満たす.それはLaxと呼ばれています!

ただリラックスしないでくださいが、ラックス!

リラックスして何を言いますか。JS ?🧐

Lax.js is a JavaScript library to create smooth & beautiful animations when you scroll.

しかし、それはすべてではない!本当に、本当に小さいです.Gzippedのとき、それはサイズで4キロバイト未満です!🤯

以下にその機能を示します:

これは、高度なアニメーションの組み合わせのための新しいJSアニメーションの構文が動作するようにしています.

今、アニメーションをスクロールしながらinteriaのキックを与えることができます.

それは素晴らしいアニメーションのeasingsが付属しています.

カスタムCSSのバインディングを作成できます.

だけでなく、スクロールベースのアニメーションがまた、(我々は後でこのデモを行う)、スクロール位置、あるいは日付と時刻に応じて入力中に行うことができます!

私たちは何を作りますか？👀

これ

おっ!私たちはスクロールをしていません.🤪

この入力対話を作成しましょう🌚

HTML

追加する<input> 新規または既存のプロジェクトファイルへのフィールド.あなたがそれを適切に与えることを確認してくださいid lax論理をコード化するときに後で必要になる.
必要に応じて autofocus 属性は、ページが読み込まれると自動的に入力にフォーカスします.このように、我々はすぐに入力フィールドをクリックする必要がなく奇妙な単語を入力を開始することができます.また、我々はいくつかを与える必要がありますplaceholder 値を指定します.ここではかわいい笑顔のカモジを使用していますが、「入力」または「タイプ」というようなものがあります.

<input id='input' placeholder="(⊃｡•́‿•̀｡)" autofocus />

CSS

私は、それが若干の我々の完成したバージョンのように見えるように、ちょうど私のCSS規則をここで説明しません.
開始するには、すべての境界線とアウトラインを削除し、それを与えるbackground-color of #95853B . あなたが見る黒い輪郭に関しては、それは要素に加えられる影です.両方使ったrgba() and rgb() 結果を達成する方法.ビットを加えるpadding , テキストを中心にしてベースを与えるfont-size .

#input {
    text-align: center;
    width: 30%;
    font-size: 25px;
    border: 0;
    outline: 0;
    background-color: #95853B;
    padding: 15px;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, 
                rgb(51, 51, 51) 0px 0px 0px 3px;
  }

::placeholder {
    color: #fff;
}

緩い。js！

インストール⬇️

ライブラリをインストールするには、両方の糸またはNPMスクリプトを使用できます.

npm install lax.js
// OR
yarn add lax.js

それからJSファイルではいつものようにインポートします.

import lax from 'lax.js';

または、私がデモのためにここでしたようにJS Delivr HTMLの上に追加するには<script> タグ.

<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>

セットアップ🛠

ライブラリが動作するように、私たちが必要とするものは、それが私たちのアニメーションのための値、および要素アニメーションバインディングと同様に、多くの少なくとも1つのドライバです.これは addDriver() メソッド.

いくつかの相互作用を確認！✨

我々は、相互作用をページロード、またはより具体的には Window はDOMに付けられる.したがって、私たちは onload すべてのLAXコードを格納する関数を作成するイベントハンドラ.
次に、 init() メソッド.
我々が与えたようにid HTMLコードの入力には、要素を取得して内部に保存しますinput 変数.これは、我々はすべての日を行う簡単なjsのことです.

const input = document.getElementById('input');

私はドライバーを追加する必要があると言った覚えていますか?このドライバを使ってアニメーションを制御します.単に呼び出しlax.addDriver() . これは、アニメーション値と計算された量を返す関数を受け取ります.我々の場合ではinputLength そして、入力要素に付加される文字の全長を計算すること.

lax.addDriver('inputLength', function () {
    return input.value.length
});

次に、実際に相互作用のトリガーを開始するには addElements() これは、アニメーションデータと共に要素セレクタルールをとる.したがって、我々は選択#input and inputLength これは以前定義しました.
あなたが気がつくならば、我々が入力フィールドの中でタイピングを始めるとすぐに、それは同時に2つのものをします;まず、それは反時計回りに回転し、また、いくつかの特定の速度でフェード.この効果はrotate and opacity CSS properties これはlaxライブラリでサポートされています.

"rotate": [
    [0, 180],
    [0, 360],
],
"opacity": [
    [0, 100],
    [1, 0]
]

今それらの数字から来るから?よく、技術的に、彼らは呼ばれますValue Maps . これらはドライバまたはCSSプロパティの値を操作するために使用されます.オブジェクト内の2つの値はINとOUTの値です.例えば、上記の回転は0 , 右から左へ回転します180 そして、それから、完全な円160 度.
不透明度は同じです.それはアニメーションのフェードのようにするには0 すなわち、フェード1 すなわち、完全なフェード.
参照のための完全なJSコードです.

window.onload = function () {
      lax.init()
      const input = document.getElementById('input')

      lax.addDriver('inputLength', function () {
        return input.value.length
      })

      lax.addElements("#input", {
        'inputLength': {
          "rotate": [
            [0, 180],
            [0, 360],
          ],
          "opacity": [
            [0, 100],
            [1, 0]
          ]
        }
      })
    }

ここでは、あなたが遊ぶために埋め込んだcodepenです」

より多くの資源🤩

前方に移動し、これらのリソースからなだめるような相互作用を作るためにラックスについての詳細を学ぶ:

Lax.js GitHub repo

Lax.js Vue Example

Laxxx.js - An Awesome Scroll Animation Library that's Only 2KB! by DesignCourse

読書ありがとう.私はそれを感謝!良い一日を.(✿◕‿◕✿)

🙄 pic.twitter.com/1G4L5SedDv

— Sasha Rosenbaum (@DivineOps)

daily.dev すべての新しいタブを最高のプログラミングニュースを提供します.私たちはあなたのための資格のソースの数百人は、将来をハックできるようにランク付けされます.