サービス
誰でも（登録不要）
無料会員
有料会員（Tier 1）
自分のAPIキーが要る

カツプロ・AI

カツプロ（ホーム） カツプロチャットAI カツプロ AI SEO

診断・見張り

サイト診断 サーバーウォッチ SNSアカウント診断

サイト・デザイン

MoteRaku デザインギャラリー 画像ツール ファビコン生成 OGPの見え方チェック 文字の読みやすさチェック

SNS・集客

カツプロPR SNS文字数カウント Instagram画像分割 QRコード作成

仕事・事務

レビュー 名刺スキャン 見積書・請求書 電子印鑑作成
サービス一覧のページへ →
メディア ヘルプ 無料登録

無料会員なら、見本とパーツの3分の2を何件でも持ち帰れます。

無料登録 →

JS・GSAPアニメーションのパーツ・動き（JS）あり

GSAP SVGの線が描かれる

1280px

使い方

  • 「コピー」で HTML と CSS を別々にコピーし、自分のページの好きな場所に入れます。クラス名はパーツごとに頭をそろえてあるので、ほかの CSS とぶつかりにくい作りです。
  • 色は CSS の頭にある --acc（アクセント色）などの変数を変えるとまとめて変わります。
  • 動きに GSAP を使っています。「ダウンロード」の zip には GSAP も入っています（HTML の中のスクリプトも一緒に入れてください）。
  • 写真は使っていません（図形と CSS のグラデーションだけ）。

ほかのJS・GSAPアニメーション

すべて見る
JS・GSAPアニメーションのパーツ「GSAP スクロールで順に現れる」 JS・GSAPアニメーション　No.01　動き（JS） GSAP スクロールで順に現れる JS・GSAPアニメーションのパーツ「数字がカウントアップ（JS）」 JS・GSAPアニメーション　No.02　動き（JS） 数字がカウントアップ（JS） JS・GSAPアニメーションのパーツ「GSAP 横に流れ続けるカード」 JS・GSAPアニメーション　No.03　動き（JS） GSAP 横に流れ続けるカード JS・GSAPアニメーションのパーツ「GSAP マウス追従の視差レイヤー」 JS・GSAPアニメーション　No.04　動き（JS） GSAP マウス追従の視差レイヤー JS・GSAPアニメーションのパーツ「タイピング風テキスト（JS）」 JS・GSAPアニメーション　No.05　動き（JS） タイピング風テキスト（JS） JS・GSAPアニメーションのパーツ「GSAP 文字をばらして出す」 JS・GSAPアニメーション　No.06　動き（JS） GSAP 文字をばらして出す JS・GSAPアニメーションのパーツ「GSAP スクロール連動で進む（scrub）」 JS・GSAPアニメーション　No.07　動き（JS） GSAP スクロール連動で進む（scrub） JS・GSAPアニメーションのパーツ「GSAP 画像がマスクで開く」 JS・GSAPアニメーション　No.08　動き（JS） GSAP 画像がマスクで開く
ダウンロード 別タブで見る 使える範囲