javascript序章SVGのpath要素を使用して、WebサイトまたはWebアプリケーションのフロントエンド用の革新的なアニメーションを作成できます。このチュートリアルでは、PathSliderライブラリを使用してSVGpathに沿って要素を移動するようにHTML、CSS、およびJavaScriptを設定する方法を示します。チュートリアル全体に従うことで、このライブラリを使用して、ある位置から別の位置に移動するスライダーを開発します。ステップ1—PathSliderライブラリを設定するスライダーを機能させるためのコードに入る前に、PathSliderライブラリーの使用方法と、そのオプションのいくつかを見てみましょう。依存しているため、PathSliderの使用を開始する前に、プロジェクトに含める必要があります。すべてが正しく機能するようにHTMLおよびCSSコードで考慮しなければならない他の小さな要件がいくつかありますが、スライダーを開発するときにそれらが表示されます。ライブラリによって提供されるオプションのいくつかをもう少しよく理解するために、SVGパスの一部と図解されたパラメーターの名前を示す次の図を見てください。この図は次のことを示しています。startLength(floatまたは’center’):要素の配置を開始するパスの長さ。これは常にアクティブなアイテムの位置になります。選択したアイテムがここに移動し、それに応じて他のすべてのアイテムも移動します。activeSeparation(フロート):アクティブなアイテムと隣接するアイテムの間の分離。paddingSeparation(float):パスの最初と最後でのパディングの分離。items:選択したアイテムが配置された後、残りのスペースを考慮して、他のすべてのアイテムは互いに同じ距離に配置されます。itemsを除いて、ここで説明するすべてのプロパティは、スライダーを初期化するときにoptionsとして提供できるため、必要に応じてスライダーを完全に自由にカスタマイズできます。これらに加えて、他のoptionsが利用可能であり、PathSliderGithubリポジトリで参照できます。次に、HTMLコードを記述しましょう。path、およびアイテムになります。pathとアイテムは同じコンテナー内にある必要があることに注意してください。これにより、配置の問題を回避できます。</a></div>基本的な構造ができたので、CSSでスタイルを設定しましょう。ステップ3—CSSでスタイルを追加するスライダーを機能させるためにスタイルは必要ありませんが、通常はpathストロークの中央にアイテムを配置します。他のスタイルをいくつか追加して、モダンなフロントエンドの外観を作成します。ここでは、主要部分のみに焦点を当てます。}}いつものように、Githubリポジトリで完全なコードを確認できます。これでスタイリングが完了しました。次に、JavaScriptでスライダーを初期化します。ステップ4—JavaScriptを使用してスライダーを初期化するスライダーを初期化するには、pathとitemsのみが必要です。オプションで、カスタマイズのためにoptionsでオブジェクトを渡すことができます。したがって、次のようなコードを使用して、必要に応じてスライダーを機能させることができます。options);このコードスニペットでは、使用されているすべてのoptionsにコメントを付けて、それぞれの意味を理解できるようにしています。ライブラリは、スライダー内の各アイテムのclickイベントを初期化するため、それらのいずれかをクリックすると、選択されます(メインの位置にアニメーション化されます)。スライダーにさらにコントロールを追加したい場合(たとえば、ある種のページ付け、または前のボタンと次のボタン)、任意の項目を選択するために呼び出すことができるいくつかの便利な関数があります。selectPrevItem():前の項目を選択します。selectNextItem():次の項目を選択します。selectItem(index):対応するindexを使用して任意のアイテムを選択します。これにより、次のようなスライダーが表示され、要素がSVGpathに沿って移動します。pathとPathSliderライブラリによって提供されるいくつかのoptionsを使用して、基本的なスライダーを開発しました。コードを試してみたり、Githubでフルコードを入手したりできます。Joseモバイルバージョンに。