【Studio】 ホバーすると下線が出るアニメーションの作り方
ホバーした時にスッと下線が出てくると、スタイリッシュで格好いいですよね。
イメージとしては下記の通りです。
そこで今回はホバーすると下線が出るアニメーションを実装していきます。手順さえ間違わなければ、初心者でも実装できる内容になっています。
ぜひ参考にしてみてください！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
ホバー時に下線が出るアニメーションの作り方
ホバー時に下線が出るアニメーションの作り方は、下記のとおりです。
- テキストとボックスを用意する
- 「ボックス」にモーションを設定
- 「グループ」にホバー時の設定をおこなう
- 「ボックス」にinホバー時のモーションを設定
合計11枚の画像を用いながら、詳しく説明していきます。
①：テキストとボックスを用意する
まずはテキストとボックスを用意します。
ボックスの縦幅が長すぎるので、「1px」に変更します。
Kajiボックスを選択しないと、縦幅を変更することはできません！
そして、この2つの要素をグループ化しておきます。
Kajiグループ化のやり方は、シフトボタンを押しながら2つの要素を選択して、Macは「⌘＋G」、Windowsなら「Ctrl＋G」を押します！
すると、下記のようにテキストとボックスがグルーピングされたはずです。
これで一旦、下準備は完了です！
次からモーションなどの設定を行うのですが、名称が複雑なので、一旦ここで整理しておきます。
Kaji下線部分のみを「ボックス」と呼び、Type Something + 下線を「グループ」と呼びます！
②：「ボックス」にモーションを設定
ボックスを選択します。
ボックスを選択した状態でモーションタブを開き、下記のように設定します。
・スケール：X0/Y1
・原点：左中央
これでボックスのモーション設定は完了です！
③：「グループ」にホバー時の設定をおこなう
次に、グループを選択します。
グループを選択した状態で、条件付きスタイルの部分を「なし」→「ホバー」に変更します。
ホバーになっている状態で、「不透明度：1」を指定します。
Kaji下記のように、不透明度の部分が水色になっていればOKです！
④：「ボックス」にinホバー時のモーションを設定
再度ボックスを選択します。
条件付きスタイルが「inホバー」になっていることを確認して、「スケール：X1/Y1」に変更します。
これでホバー時に下線が出るようになったはずです！
一度ライブプレビューを開いて確認してみてください！
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
