CascadeJSで簡単にカスケード効果を作成する

派手なアニメーションはウェブ上で1ダースです。信じられないほどたくさんのものが作成されやすくなっています アニメーションライブラリ.

Cascade.js リストに追加するライブラリがもう1つあり、それは間違いなくユニークなものです。 Cascadeでは、を使用してカスタムアニメーション効果をデザインできます。 カスケードレター テキストまたは カスケード要素 メインコンテナ内.

この図書館は 依存関係なし;それは古典的なJavaScript上で動作します。 npm、Bower、またはGitHubから直接コピーをダウンロードすることでインストールできます。.

CascadeJSを機能させるためには、 2つのファイルが必要：CSSファイルとJavaScriptファイルどちらも同梱されています 縮小バージョン ページサイズを数KB節約する.

各Cascade要素は別々の部分に分割されます。 個別にアニメートする スルー 要素です。これらは 動的に追加, だからあなたはあなたのHTMLの何も変更する必要はありません.

しかし、あなたはする必要があるでしょう を設定する フロー（） 関数 アニメーション化する要素をターゲットにした後、ファイル内で.

あなたは実際にできます jQueryを使う このライブラリでは、必要に応じて 必須ではありません. したがって、jQueryで要素を選択したい場合は、代わりにそれを使用してください。.

これが バニラJavaScriptのスニペット メインサイトのデモから：

あなたは渡すことができます フロー（） の要素 パラメータなし, またはできます それらすべてを構成する あなた自身。それはとります 8つのオプションパラメータ アニメーションスタイル、タイミング、デュレーション、およびオプションのCSSクラスを編集するため.

CascadeJSには別の機能があります。 断片（） それはあなたをすることができます 文字（または要素）を分割する アニメートせずに、別々のコンテナに入れます。あなたはこの機能を使用することができます 色とスタイルのテキスト 単語内の個々の文字をターゲットにして、ページ上でかなりかっこいいですよね?

すべて コードサンプル メインのライブラリページで公開されているので、自分でコピー/貼り付けやティンカーができます。しかし、あなたはまた見つけることができます ドキュメンテーション より明確な方法を探しているなら、GitHubページに。.