前回の記事ではだいぶWixから脱線してしまったので、Veloを使用してヘッダの表示をコントロールしたお話をしたいと思います。

出来上がったものを早速ご覧になりたい方はこちら。

この機能が入っている制作事例はこちら。

ヘッダのメニューアイコンがGIFアニメも相まって可愛く仕上がっていますのでぜひ。

Wix Editorではスクロールしたあとのヘッダの表示の設定が4つしかなく、デザイナーから要望を満たせませんでした。

「ある程度スクロールした地点以降からヘッダを出してほしい」という機能がなかったので、Veloで実装した次第です。

Veloを使用しますが、見た目に関わる箇所ですのでデザイナーが後から編集できるように

できる限りコーディングを避けて実装しております。

まずはサイトのDev Modeをオンにします。“開発モードを有効にする”をクリックすると2枚目の画像のように表示されます。

編集画面の左端と下端に機能が追加されたかと思いますが、今回は下のコードエディタを使用します。

次に、ヘッダに表示をコントロールしたいパーツを置きます。

（ヘッダは場所であって表示をコントロールさせるのはあくまでパーツです。）

今回はヘッダに画像のような簡単なものを用意しました。

表示をコントロールさせたいパーツはグループ化しておきます。

次に、コードエディタへ移ってIDを変更します。

IDを"menuBoxHome"へ変更し、デフォルト値の"Hidden"にチェックを入れます。

ヘッダースクロール設定は「固定」にします。

次に、「どの地点でヘッダが表示されてほしいか」を設定するためのアンカーを追加します。

Editorの「追加」→「メニュー・アンカー」→「アンカー」で追加します。

ヘッダを表示させたい地点にアンカーを置きます。これから、アンカーを通り過ぎたらヘッダが表示されるよう設定していきます。アンカーの名前も適当で構いません。

アンカーをクリックして選択した後に、コードエディタへ移ります。

IDを"anchorMenuHome"へ変更します。

（この後紹介するコードをそのまま使用する場合、このIDは同じ名前にしておいて下さい。）

次に、“イベントハンドラ”の下にある"onViewportEnter"と"onViewportLeave"を設定します。

まずはonViewportLeaveを選択して、+をクリックします。

すると、コードエディタの方に"export function~" から始まるコードが出てきたと思います。

export function anchorMenuHome_viewportLeave(event) {
	//いっぱい英語があると思いますが、”//”以降の灰色になっている文字をすべて消して、コードを"}"より上に書いていきます。
}

以下のように記述します。

export function anchorMenuHome_viewportLeave(event) {

    $w('#menuBoxHome').show("fade", fadeOptions);
}

"fade"は表示する際のアニメーションの設定、"fadeOptions"には表示をコントロールする設定値が入ります。"fadeOptions"は変数を利用して設定します。

"$w.onReady"より上に変数の定義を記述します。

let fadeOptions = {
     "duration": 100,
     "delay": 0
};
$w.onReady(function () {

});

これで以下のようなコードになったかと思います。

let fadeOptions = {
     "duration": 100,
     "delay": 0
};

$w.onReady(function () {

});

export function anchorMenuHome_viewportLeave(event) {

    $w('#menuBoxHome').show("fade", fadeOptions);
}

これをonViewportEnterついても同様に設定します。

全体のコードは以下のようになります。

//フェードアニメーションの設定値
let fadeOptions = {
     "duration": 100,
     "delay": 0
};

$w.onReady(function () {

});
//アンカーより下へスクロールした際の処理
export function anchorMenuHome_viewportLeave(event) {
    //表示させる
    $w('#menuBoxHome').show("fade", fadeOptions);
}
//アンカーより上へスクロールした際の処理
export function anchorMenuHome_viewportEnter(event) {
    //隠す
    $w('#menuBoxHome').hide("fade", fadeOptions);
}

出来上がったものがこちらになります。

この機能を使用した製作事例はこちらです。

実装にあたり参照したVelo Referenceは以下のとおりです。

https://www.wix.com/velo/reference/$w/hiddenmixin/show

https://www.wix.com/velo/reference/$w/hiddenmixin/hide

他、お気づきの点ありましたらお気軽にご質問下さい。🙌