スポンサーリンク
スポンサーリンク

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition=”slide”などのアニメーションが設定されていると、ページ遷移時に、サンプルコードの実行結果のようにヘッダ、フッタも同じアニメーションで切り替わります。ヘッダ、フッタにdata-id属性で同じIDを指定すると、ページ遷移時どちらにも移動せず、画面にそのまま残り続けます。内容は遷移後のページのものに切り替わります。

ですが、条件があり、遷移前後のページのヘッダ、フッタにはそれぞれdata-position=”fixed”も設定されていなければなりません。これらの属性はヘッダ、フッタのいずれかを設定するだけでも動きます。

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました