【CSS/jQuery】ページ切り替え時に背景色を伸ばす方法!

受講料が完全無料!

・プログラミンを始めようとしている方
・未経験だけどIT業界に転職したいと思っている方

今なら、EngineersGateの受講料が完全無料!

大手企業案件の実績多数のエンジニアが直接指導してくれるため未経験の方でも最短3週間で就職が可能です!

まずはお問合せから!

(この記事は2022年5月21日に投稿されました。)

自分のサイトでページ切り替え時に何らかのアニメーションをつけたいと思ったことはありませんか?

WordPressでは、CSSとjQueryを使用することで、下記のようなサイトの背景色を伸ばすアニメーションを実装することができます。

ページ切り替え時に背景色を伸ばすアニメーションの絵

ページ切り替え時に背景色を伸ばすことから、こちらはメニューをクリックしたり、記事のリンクをクリックしたりする際のアニメーションとして使用すると良いでしょう。

また、背景色の伸ばし方は、左から右などの一方の方向からだけでなく、真ん中から上下のように双方向から伸ばすことも可能です。

アニメーションの時間を設定することで、伸ばす速度を変更できますので、ページの読み込み速度を考慮した上で設定しましょう。

今回はCSSやjQueryを使ってページ切り替え時に背景色を伸ばす方法について紹介していきます。

この記事はこんな方におすすめ
・サイトにおしゃれなアニメーションをつけたい人




ページ切り替え時に背景色を伸ばすアニメーションに必須なコード

まずは、ページ切り替え時に背景色を伸ばすアニメーションに必須なコードについてご紹介していきます。

今回のアニメーションを実施するにはHTML、CSS、jQueryのコードを記述する必要があります。

これらのコードは実施するに当たって共通コードになりますので、必ず追記するようにしましょう。

ページ切り替え時に一方方向から背景色を伸ばす場合

まずは、ページ切り替え時に一方方向から背景色を伸ばす場合です。

HTML/CSS、jQueryを下記のように記述する必要があります。

⚫︎ sample1.html

⚫︎ sample1.css

⚫︎ sample1.js

ページ切り替え時に真ん中から背景色を伸ばす場合

次に、ページ切り替え時に真ん中から背景色を伸ばす場合です。

HTML/CSS、jQueryを下記のように記述する必要があります。

⚫︎ sample2.html

⚫︎ sample2.css

⚫︎ sample2.js

ページ切り替え時に一方方向から背景色を伸ばすパターン

ページ切り替え時に一方方向から背景色を伸ばすパターンについて紹介していきます。

方法としましては、先ほど記述したコードにこれから紹介するコードを追記するような流れとなります。

ここでご紹介するのは下記の4つのパターンとなります。

  1. 上から下に背景色を伸ばす場合
  2. 下から上に背景色を伸ばす場合
  3. 右から左に背景色を伸ばす場合
  4. 左から右に背景色を伸ばす場合

上から下に背景色を伸ばす場合

上から下に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample1.css

実行結果

上から下に背景色を伸ばした結果

ボタンをクリックすると、背景色が上から下に伸びてページ移動が行われています。

下から上に背景色を伸ばす場合

下から上に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample1.css

実行結果

下から上に背景色を伸ばした結果

ボタンをクリックすると、背景色が下から上に伸びてページの移動が行われています。

右から左に背景色を伸ばす場合

右から左に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample1.css

実行結果

右から左に背景色を伸ばした結果

ボタンをクリックすると、背景色が右から左に伸びてページの移動が行われています。

左から右に背景色を伸ばす場合

左から右に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample1.css

実行結果

左から右に背景色を伸ばした結果

ボタンをクリックすると、背景色が左から右伸びてページの移動が行われています。

ページ切り替え時に真ん中から背景色を伸ばすターン

ページ切り替え時に真ん中から背景色を伸ばすターンについて紹介していきます。

ここでご紹介するのは下記の2つのパターンとなります。

  1. 真ん中から左右に背景色を伸ばす場合
  2. 真ん中から上下に背景色を伸ばす場合

真ん中から左右に背景色を伸ばす場合

真ん中から左右に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample2.css

実行結果

真ん中から左右に背景色を伸ばした結果

ボタンをクリックすると、背景色が真ん中から左右に伸びてページの移動が行われています。

真ん中から上下に背景色を伸ばす場合

真ん中から上下に背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample2.css

実行結果

真ん中から上下に背景色を伸ばした結果

ボタンをクリックすると、背景色が真ん中から上下に伸びてページの移動が行われています。

真ん中から斜めに背景色を伸ばす場合

真ん中から斜めに背景色を伸ばす場合はsample.cssに下記コードを追記していきます。

⚫︎ sample2.css

実行結果

真ん中から斜めに背景色を伸ばした結果

ボタンをクリックすると、背景色が真ん中から上下に伸びてページの移動が行われています。

実際にページ切り替え時に背景色を伸ばしてみた

実際にページ切り替え時に背景色をのばしてみます。

今回はWordPressで作成した「Twenty Twenty-One」のサイトでページの移動の際に背景色を伸ばしてみます。

⚫︎ header.php

⚫︎ footer.php

⚫︎ style.css

実行結果

サイトにページ切り替え時に背景色を伸ばすアニメーションを設置した結果

グローバルメニューをクリックすると、背景色が伸びて表示されてページが遷移されています。

まとめ

⚫︎ ページ切り替え時に一方方向から背景色を伸ばすパターンは下記の4つである
・上から下に背景色を伸ばす場合
・下から上に背景色を伸ばす場合
・右から左に背景色を伸ばす場合
・左から右に背景色を伸ばす場合

⚫︎ ページ切り替え時に真ん中から背景色を伸ばすターンは下記の2つである
・真ん中から左右に背景色を伸ばす場合
・真ん中から上下に背景色を伸ばす場合
・真ん中から斜めに背景色を伸ばす場合

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です