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

(この記事は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つである
・真ん中から左右に背景色を伸ばす場合
・真ん中から上下に背景色を伸ばす場合
・真ん中から斜めに背景色を伸ばす場合

コメントを残す

メールアドレスが公開されることはありません。