「20代の副業とキャリアを考えるブログ」というコンセプトのもと、情報を発信中。同世代のビジネスパーソンを応援しています。都内の平凡な大学を卒業し、本業は人事コンサルの会社に勤務しています。社会人4年目の25歳です。当ブログでは、ノーコードWEB制作制作ツール「STUDIO」がもっと楽しくなる、おすすめのアニメーションをご紹介しています。今回はテキストにカーソルを合わせたときに、テキスト下にラインを出現させるアニメーションをご紹介します。活用できるシーンが幅広いアニメーションだと思いますので、ぜひご活用いただけたらと思います。完成イメージ今回実装したいライン出現の完成イメージはこんな感じです。難しそうに見えるかもしれませんが、ものの数分でできちゃうおすすめのアニメーションの1つです。ライン出現させるアニメーションのやり方それでは実装方法を解説していきます。STEP1:テキストとボックスを上下に並べて配置まずは任意のテキストの下に、ホバー時に出現することになるラインを作ります。このラインはボックスで作成します。テキスト部分:横幅・縦幅どちらもauto設定ライン部分:横幅を100%、縦幅はお好みでOK(1〜5px程度推奨)画像のように、1つのボックス(親ボックス)のなかにテキストとラインを上下に並べて配置するようにします。次にラインの横幅と透明度を変更します。ラインをクリックし、横幅が5%、透明度が0になるように設定します。親ボックス全体のコンテンツ位置が左寄せになっていない場合は、画像のように左寄せにしておきましょう。(作業中のデザインエディタ上では画像のようにラインが見えない状態になればOKです)STEP3:ホバーの設定を行う次のステップでは、先ほど透明にしたラインがホバー時に出現するようになる設定を行います。親ボックス上のどこかにカーソルを合わせると、子ボックス2のラインが出現するといったイメージです。この場合は「inホバー」という設定が必要になるのですが、以下の手順通りに進めれば特に難しくありません。親ボックスを選択した状態で、ホバーをクリックします。(このとき、上部のエディタメニューは何も変更しなくてOKです。)次に、透明になっているライン部分を選択して、右上の「inホバー」をクリックします。続いて、「inホバー」がクリックされている状態のまま、横幅を100%、透明度を1に設定します。(画像のように、エディタメニューで設定を変更した部分が水色になればOKです)「inホバー」の設定時に、モーションメニューから時間やイージングをお好みに設定することも可能です。することで、ライン出現の仕方を自由に変更することができます。これであっという間に設定は完了です。ライブプレビューで確認してみましょう!この例では親ボックスのコンテンツを左寄せにしているため、左側から右側に向かってラインが出現するアニメーションになっています。中央揃えで設定すれば中央から左右に広がりながらラインが出現し、右寄せにすると右側から左側に向かってラインが出現するようになります。STUDIOを活用したWEB制作をお手伝いします当ブログを運営している合同会社APCTでは、STUDIOを活用したHP制作/LP制作を15万円(税抜)で承っております。ご要望に応じて、STUDIOを活用したHP制作のサポート(共同編集者としてプロジェクトに参画)も行っています。私たちと一緒に働いてくれるデザイナーさんも募集中です!(副業可・STUDIOスキル必須)制作・求人に関してのお問い合わせは、下記のフォームよりお気軽にご連絡ください。