固定背景bg1を左から右へ動かしたり、じんわり拡大するcssはカスタムに入っている。片方は効かなくしている。

新・固定表示の開閉タブ

下記cssとJS【新・固定表示開閉タブOP/CL タブ遅延仕様 / 表示が崩れない対策】でうごく。

/* ===========================
NEW 固定表示開閉タブ
完全作り直し版
動き:
・文章の幅は最初から完成幅
・外側だけ0幅にして隠す
・中身は左からスライド
・高さ計算JSなし
============================= */

無料のHPフィッティング(デモサイト作成)
 画像や文章は、事業内容に合わせて変更可能
他のデザインも見たい方はこちら

固定背景を非表示にするには、stock-blockをクラス名にいれる。それとbg5 or bg6のクラス名を変更する → bg6stockとか。
スライド、アンカー確認!

【基本型4枚 2枚まで増加可能】
通常:
b1 → b2 → b3 → b6 → b7
bg1 → bg2 → bg3 → bg4

1枚追加:
b1 → b2 → b3 → b4 → b6 → b7
bg1 → bg2 → bg3 → bg5 → bg4

2枚追加:
b1 → b2 → b3 → b4 → b5 → b6 → b7   b7は最後のCONTACT用。b6の直後に置く。最後位置の計算に使う。
bg1 → bg2 → bg3 → bg5 → bg6 → bg4   いずれもbg4をラストにする。

b4 / b5:追加用の普通スライド。b3 と b6 の間に入れる。b2・b6と同じ固定幅タイプ。

下のトップカバーb1を透過させるアニメーションはカスタムcssにはいっている。画像をいれると画像は透明度が0→1に。画像抜くと透明度が0→ブロック指定に。両方の共存も可能。

固定背景を非表示にするには、stock-blockをクラス名にいれる。それとbg5 or bg6のクラス名を変更する → bg6stockとか。
スライド、アンカー確認!

スマホのb1上での配置などを調整する場合

スマホのときのb1上の文字の配置はYOKOHPのcss上で決めている。
/* ======================================
スマホ:b1を透明 + 文字を画面中央表示
+ 位置微調整できる版
====================================== */
body:not(.wp-admin):not(.block-editor-iframe__body){
--b1-text-x: 0px;    /* b1全体の文字:左右位置 */
--b1-text-y: -150px;    /* b1全体の文字:上下位置 */  ←タイトルのこと
--b1-swipe-x: 0px;    /* b1内のsp-only:左右位置 */  ←swipのやつのこと
--b1-swipe-y: 300px;    /* b1内のsp-only:上下位置 */

単にグラデを用いない透明からレイヤーor画像へのアニメーション

/* 画像+色レイヤーをまとめて透明から表示 */
selector .wp-block-cover__image-background,
selector .wp-block-cover__background{
animation: coverLayerFadeIn 5.0s ease-out 2.0s both;
animation-play-state: paused;
}
/* このカバー自身がアクティブになったら開始 */
selector.b-anim-active .wp-block-cover__image-background,
selector.b-anim-active .wp-block-cover__background{
animation-play-state: running;
}
/* 編集画面では普通に表示 */
.editor-styles-wrapper selector .wp-block-cover__image-background,
.editor-styles-wrapper selector .wp-block-cover__background{
animation: none !important;
}
/* 透明 → それぞれ元の透明度へ戻る */
@keyframes coverLayerFadeIn{
from{
opacity: 0;
}
}

グラデーションを用いるアニメーション

透明度を一律変更したいときはブロックのオーバーレイを使う。ただ左の色と右の色のそれぞれで透明度を変更したい場合には色の後ろに指定の2桁数字を追加すると透明度を指定できる。

selector{
/* ここだけ変更 */
--grad-left: #90702c66; /* 左の色 */
--grad-right: #90702ccc; /* 右の色 */
/* 色の後ろに下記2桁を追加すると透明度を指定できる
00 透明
33 薄い
66 やや薄い
80 半分くらい
99 少し濃い
cc 濃い
ff ベタ塗り */

position: relative !important;
overflow: hidden !important;
}

/* カバー色レイヤーをグラデーションにする */
selector .wp-block-cover__background{
background: linear-gradient(
90deg,
var(--grad-left) 0%,
var(--grad-right) 100%
) !important;

opacity: var(--grad-opacity);
}

/* 画像+グラデーションをまとめて透明から表示 */
selector .wp-block-cover__image-background,
selector .wp-block-cover__background{
animation: coverLayerFadeIn 5.0s ease-out 2.0s both;
animation-play-state: paused;
}

/* このカバー自身がアクティブになったら開始 */
selector.b-anim-active .wp-block-cover__image-background,
selector.b-anim-active .wp-block-cover__background{
animation-play-state: running;
}

/* 編集画面では普通に表示 */
.editor-styles-wrapper selector .wp-block-cover__image-background,
.editor-styles-wrapper selector .wp-block-cover__background{
animation: none !important;
}

/* 文字は一番上 */
selector .wp-block-cover__inner-container{
position: relative !important;
z-index: 3 !important;
}

/* 透明 → それぞれ元の透明度へ戻る */
@keyframes coverLayerFadeIn{
from{
opacity: 0;
}
}



下のグループの段落に画像のタイトル名をつける。画像と同じ個数にすること

不必要なカバーにはstock-blockをクラス名にいれること。

【スライド枚数を増減させる場合の注意点】
・スライドを増やせば、固定背景、左下のアンかーも同数増やす。左下アンカーは内容より順番が重要。
・追加スライドは b3 と b6 の間に入れる。b4 / b5 は普通スライド専用。
・b7は最後のCONTACT用なので最後に残す。
・bg5 / bg6 は bg4 の後ろではなく、流れとして bg4 の前に入る。

スライドを非表示にするには、stock-blockをクラス名にいれる。それとb4 or b5のクラス名を変更する → b5stockとか。
固定背景、アンカー確認!

    スライドを増やしたら、その場所に対応するリストも同じ位置に増やす必要がある。
    b4・b5あり: TOP PROFILE SERVICE 追加ページ名1 追加ページ名2 ABOUT CONTACT
    CONTACT以外の通常メニュー → 内容ではなく順番!リスト名は何でもよい。アンカー設定不要