SWELLのフルワイドブロックでアニメーション【波の動き】

アイキャッチ

SWELLのフルワイドブロックは境界線の形状を選べますが、トップページで波型にしているサイトをよく見かけます。プラグインでどうにかアニメーションさせることができないかと物色したところ、wavify.jsを見つけました。

フッター直前に置くのも相性が良さそうですね。CDN読み込みなのでインストール不要です。function.phpにコピペするだけなので試してみてください。

SWELL前提で話を進めますが、その他のテーマでもおそらく実装可能です。というのも実は、フルワイドブロックをアニメーションさせている訳ではなく、新たにアニメーションするブロックを配置するだけです。タイトルは釣りで(ごめんなさい)「フルワイドブロックの上部に配置したブロックが波型にアニメーション」が正しいです。

目次

プラグイン【wavify.js】を実装

wavifyはjQuery版とVanilla版があります。SWELLはjQuery非依存のテーマなのでそれに合わせてVanilla版を採用しています。デフォルト設定で動くので安心してください。

STEP
function.phpにコードを記述

SWELL子テーマを利用します。Wordpressメニューの外観テーマファイルエディターからSWELL CHILDを選択、function.phpに次のコードをコピペしてください。特に理由がなければ一番下にペーストしてください。

////フルワイドブロック上部_波/////////////////////////////////////////
function call_wavify() {
	if( is_home() || is_front_page() ){
		//トップページのみ
		wp_enqueue_script('TweenMax-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js','','2.0.1', true );
			//読み込み順番重要 TweenMaxが先
		wp_enqueue_script( 'wavify-js', 'https://cdn.jsdelivr.net/npm/wavify@1.0.0/wavify.js', array('TweenMax-js'), '1.0.0', true );
		$script = "
			var myWave = wavify( document.querySelectorAll('.wave'), {
				//'.wave'は任意のクラス
  				height: 60,
					//波の高さ
  				bones: 5,
					//波の数
  				amplitude: 40,
					//振幅
  				color: 'rgba(247, 247, 247, 1)',
					//色
  				speed: .25
					//波の速さ
			})
		";
  		wp_add_inline_script( 'wavify-js', $script, 'after' ) ;
	}
}
add_action( 'wp_enqueue_scripts', 'call_wavify' );

サンプルはトップページ(固定ページで作成したものも含む)でしか4行目以降のコードを読み込みません。その他のページでアニメーションさせたい場合は3行目で指定してください。

//トップページと指定の投稿ページ
    if( is_home() || is_front_page() || is_single('投稿ID') ){

//カテゴリーページ
    if( is_category() ){
STEP
カスタムHTMLを配置

アニメーションさせたいフルワイドブロックの直上にもうひとつフルワイドブロックを設置し、その中に次のコードを記述したカスタムHTMLを配置してください。

<svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="wave" d=""></path></svg>

カスタムHTMLを配置したらフルワイドブロックを設定します。

横幅

フルワイド

上下のpadding量(PC)

0

上下のpadding量(SP)

0

背景色の不透明度

0

エディター内にフルワイドブロックとカスタムHTMLを設置。設定で横幅をフルワイド、padding量を0にしている。

classは任意。変更する場合はfunction.php9行目のwaveも併せて変更。

STEP
フルワイドブロックにクラスを付与

アニメーションブロックと次のブロックの間に隙間ができるのでCSSで調整します。フルワイドブロックにクラスを追加してください。サンプルはwave-marginとしています。

フルワイドブロックにクラスを追加。サンプルは「wave-margin」を追加している。

カスタムHTMLの下余白はエディターでは調整できません。

STEP
style.cssにコードを記述

SWELL CHILDstyle.cssに次のコードをコピペしてください。特に理由がなければ一番下にペーストしてください。数値は隙間ができないように調整してください。

/*///波_下余白調整 クラス名は任意///*/
.wave-margin{
	margin-bottom: -10px;
}
style.cssにCSSを追加。サンプルをペースト。
STEP
色を合わせる

アニメーションブロックと元々あるフルワイドブロックの色を合わせます。function.phpにペーストしたコードの17行目にrgbaカラーモデルで指定してください。サンプルコードはSWELLのデフォルトカラー–color_gray(247,247,247)です。

color: 'rgba(0, 0, 0, 0.5)',
    //黒・透過度50%

透過度を指定しないならrgbでもOK。

2個以上設置する場合

複数個設置する場合、同じ動きのものであればブロックをコピーしてそのまま設置して下さい。違う動きをさせたい場合はクラス名を変更して新たにパラメータを設定します。

<svg width="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="kaiser" d=""></path></svg>

フルワイドブロックに隙間調整用のクラスwave-marginを設定し忘れないようにしてください。

////フルワイドブロック上部_波_設定複数/////////////////////////////////////////
function call_wavify() {
	if( is_front_page() || is_single(2694) ){
		//トップページのみ
		wp_enqueue_script('TweenMax-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js','','2.0.1', true );
			//読み込み順番重要 TweenMaxが先
		wp_enqueue_script( 'wavify-js', 'https://cdn.jsdelivr.net/npm/wavify@1.0.0/wavify.js', array('TweenMax-js'), '1.0.0', true );
		$script = "
			var myWave = wavify( document.querySelectorAll('.wave'), {
  				height: 60,
  				bones: 5,
  				amplitude: 40,
  				color: 'rgba(242, 242, 242, 1)',
  				speed: .25
			})
			var kaiserWave = wavify( document.querySelectorAll('.kaiser'), {
  				height: 80,
  				bones: 10,
  				amplitude: 50,
  				color: 'rgba(0, 0, 0, .5)',
  				speed: .15
			})
		";
  		wp_add_inline_script( 'wavify-js', $script, 'after' ) ;
	}
}
add_action( 'wp_enqueue_scripts', 'call_wavify' );

パラメーターの調整方法は言語化が難しいです。最初のコード内のコメントを参考に、数値をいじりながらお好みの波に仕上げてください。

下境界線をアニメーションさせる

SWELLのフルワイドブロックは下境界線も波型にできます。wavify.jsは上境界線しかアニメーションできないのでCSSで反転させれば下境界線もアニメーションさせられます。

/*///SVGを直接反転させてはダメ。フルワイドブロックにクラスを付与して反転させる///*/
.inverted {
    transform: scale(1, -1);
}

フルワイドブロックに他のアニメーションを使用していると、transformが無効になる可能性が高いです。その時はさらにフルワイドで囲うなどしてtransformを別々にあてるようにしてください。

アニメーション用のjsファイルはだいたいこのパターンで実装できます。

  • jsファイルを読み込む
  • パラメータを指定する

テンプレ的に覚えておけば色々なアニメーションを実装できます。その他のアニメーションも是非試してみてください。

  • アップデート頻度…文句なし。機能も順調に拡張し続けている。不具合対応も早い。
  • サポート…フォーラム形式で活発。開発者と回答者がフォーラムのいい雰囲気を作っている。
  • ライセンス数…制限なし。好きなだけブログを量産できる。
  • ブロックエディタ対応…完全対応。記事執筆が超快適。
  • 機能性…他テーマと比較してもトップクラス。比較記事はこちら
  • デザイン性…基調はシンプルですが、カスタムする環境は整っています。色々な方向性でデザインすることが可能。
  • 価格…17,600円(税込み)

\ ブログ運営が楽しくなる/

よかったらシェアしてね!
  • URLをコピーしました!
目次