要素が画面に入るとアニメーションで下線を表示させる方法
MENU
  1. HOME
  2. jQuery / CSS / WEB制作
  3. 要素が画面に入るとアニメーションで下線を表示させる方法

最近の作業実績

  • 2021年07月08日既存サイトのレイアウト崩れを修正いたしました。
  • 2021年07月07日既存サイトにアニメーションを追加いたしました。
  • 2021年07月05日既存サイトにライトボックスを導入いたしました。
  • 2021年07月05日フルスクリーンナビゲーションを導入いたしました。
  • 2021年07月02日カスタムフィールドの導入と出力を担当いたしました。
  • 2021年07月01日CSVファイルを使った一括更新環境を整備いたしました。
  • 2021年06月30日WordPressとプラグインのバージョンアップを担当いたしました。
  • 2021年06月29日WordPressで発生していた不具合を修正いたしました。
  • 2021年06月28日2つのWordPressサイトを統合いたしました。
  • 2021年06月22日オリジナルテーマを制作いたしました。
  • 2021年06月21日カスタムフィールド周りの不具合を修正いたしました。
  • 2021年06月20日WordPressのエラーを修正いたしました。
  • 2021年06月19日SSL化の不具合を修正いたしました。
  • 2021年06月18日セキュリティ対策を導入いたしました。
  • 2021年06月17日ページ内リンクの不具合を修正いたしました。
  • 2021年06月17日既存サイトのデザインを一部修正いたしました。
  • 2021年06月17日オリジナルテーマを制作いたしました。
  • 2021年06月17日既存ページの編集と新規ページを作成いたしました。
  • 2021年06月17日資料のダウンロードフォームを設置いたしました。
  • 2021年06月17日オリジナルテーマを制作いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。
  • 2021/04/16

要素が画面に入るとアニメーションで下線を表示させる方法

この投稿は2021/04/16に加筆修正いたしました。

要素が画面内に入ると、下線が表示されるアニメーションの実装方法をご紹介します。
次の行のようなアニメーションですね。

この行が画面に入ると下線が自動的に表示されます。

目立たせたい要素に下線を引くだけでなく、今回のようなアニメーションを加えれば、さらに要素を強調させることができます。

このカスタマイズ、じつは意外と簡単です。
興味のある方は、今回のコンテンツをじっくりと読んで挑戦してみてください。

この記事は約 4 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行しております。ご希望のカスタマイズがあればお気軽にご相談ください。

要素が画面に入るとアニメーションで下線を表示させる手順

具体的な手順を解説していきます。
今回のカスタマイズは、以下の3ステップで実装可能です。

  1. jQueryを実装する
  2. CSSで下線を装飾する
  3. 下線を表示させたい箇所にクラスを設置する

個別に見ていきましょう。

手順1:jQueryを実装する

まず、下記のコードをfooter.phpなどに記述しましょう。

<script>
$(window).scroll(function (){
 $(".marker_animation").each(function(){
   var position = $(this).offset().top;
   var scroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   if (scroll > position - windowHeight){
     $(this).addClass('active');
   }
 });
});
</script>

上記のコードを簡単に説明しますと、ウィンドウの高さなどを取得し、要素が画面内に入ったらクラス「active」が追加されるといったものです。

クラス「active」に、下線をアニメーション表示させる装飾を施しておくことで、画面に要素が入った時、下線をアニメーション表示させる仕組みです。

手順2:CSSで下線を装飾する

つぎに、下線とアニメーションをCSSで定義してやります。

.marker_animation.active{
background-position: -100% .8em;
}
.marker_animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,90) 10%);
background-repeat: repeat-x;
background-size: 200% .4em;
background-position: 0 .8em;
transition: all 1s ease;
font-weight: bold;
}

こちらのCSSはお好みで変更してください。
変更するであろう箇所を、ザックリとですが解説しておきます。

rgb(255,250,90)

上記の部分が、下線の色を指定している部分です。
RGBの値を好みの色に変更してください。

rgb(255,250,90) 10%)

上記の【10%】の部分が、下線の濃さを定義している部分です。
値が大きくなるほど、下線が薄くなります。

background-size: 200% .4em;

上記の【.4em】の部分が、下線の太さを定義しています。
値が大きくなるほど、下線を太くできます。

background-position: 0 .8em;

上記の【.8em】部分が、下線とテキストの距離を定義しています。
値が大きくなるほど、下線がテキストから離れます。

この部分の修正には、注意が必要です。
この部分の値を編集した場合、以下の部分も同じ値にしなければなりません。

background-position: -100% .8em;

上記の【.8em】の部分です。
この2ヶ所は、必ず同じ値にしましょう。

手順3:下線を表示させたい箇所にクラスを設置する

最後に、アニメーションで下線を表示させたい箇所にCSSのクラス【.marker_animation】を設定してやります。

<span class="marker_animation">アニメーションで下線を表示させたいテキスト</span>

すると、以下の様に下線が表示されます。

アニメーションで下線を表示させたいテキスト

以上です。

まとめ

要素が画面に入るとアニメーションで下線を表示させる方法をご紹介しました。

  1. jQueryを実装する
  2. CSSで下線を装飾する
  3. 下線を表示させたい箇所にクラスを設置する

上記の3ステップで、この行のようなアニメーションを実装することができます。
興味のある方は、挑戦してみてください。

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA