アニメーション中のスクロールを中止したい（css,html）

ファーストビューのアニメーションについて質問です。

結論から言うと、ページを開いたときのアニメーションの途中に画面をスクロールできないようにしたいです。
アニメーション中に閲覧者がスクロールすると、アニメーション終了後にサイトページがトップの位置に表示されなくなってしまう現象が起きてしまうためです。
overflow: hidden;などcssに入れて工夫しみたのですが、一向に解決できずご相談させていただきました。以下、サイトURLおよびhtml,css(必要に応じてご参照ください)を貼っておきます。
よろしくお願いします。

サイトURL
http://tabizukan-backpacker.com

(参考)

HTML

<div class="disableScroll"> <div class="bg"> <p class="text">Digout</p> </div></div> <div class ="home"></div>

CSS
.bg {
width: 100vw;
height: 100vh;
background: #773c30;
animation: bgAnime 1s linear 1.8s forwards;
z-index: 2;
position: relative;
position:fixed;
}

.text {
text-align: center;
font-size: 6vw;
color: #fff;
height: 1em;
line-height: 1.2;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 7;
animation: textAnime2 .1s linear 1.5s forwards;
position:fixed;
}

.text:after{
content: "";
width: 24vw;
height: 1.2em;
background: #773c30;
top: 0;

left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 9;
animation: textAnime1 1.3s linear forwards;
position:absolute;
top:100px;
position:fixed;

}

/keyframe/

@keyframes
textAnime1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}

@keyframes
textAnime2 {
0%{
transform: rotate(0);
}
100%{
transform: rotate(-10deg);
}
}

@keyframes
bgAnime {
0%{
opacity: 1;
}
99%{
opacity: 0;
}
100%{
opacity: 0;
display: none;
}
}

#home {
z-index: 1;
position: relative;
}

行動規範の内容に同意します

回答1件

ベストアンサー

body に overflow: hidden;を付けるとスクロールできないので、
アニメーションしている間は、body をoverflow: hidden;にしておくアニメーションを設定すればいいでしょう。

css
1body {
2  animation: disableScroll .1s linear 2.8s both;
3}
4
5@keyframes
6disableScroll {
7  0%{
8    overflow: hidden;
9  }
10  100%{
11    overflow: auto;
12  }
13}

アニメーション後もリンク等をクリックできない現象の対処法。

原因

css
1@keyframes
2bgAnime {
3  0%{
4    opacity: 1;
5  }
6  99%{
7    opacity: 0;
8  }
9  100%{
10    opacity: 0;
11    display: none;
12  }
13}

上記の display: none; div.bg を消したつもりかもしれませんが、display は @keyframes の対象外のプロパティです。
@keyframes の対象になるプロパティは数値として設定できるものになります。
アニメーションは数値の増減で表現するものなので。

アニメーション可能な CSS プロパティ - CSS: カスケーディングスタイルシート | MDN

z-index は数値設定ですので、これで背面に移動させればクリックできるようになります。

css
1@keyframes
2bgAnime {
3  0%{
4    opacity: 1;
5    z-index: 2;
6  }
7  99%{
8    opacity: 0;
9    z-index: 2;
10  }
11  100%{
12    opacity: 0;
13    z-index: -1;
14  }
15}

スクロール禁止の別案

html
1<body>
2  <div class="bg">
3  </div>
4  <div class="wrapper">
5     .bg以外の要素をwrapperで囲む
6  </div>
7</body>

bgのアニメーション終了まで .wrapper の高さを 0、
その後、auto にする。

css
1.wrapper {
2  z-index: 1;
3  position: relative;
4  animation: disableScroll .1s linear 2.8s both;
5  overflow: hidden;
6}
7
8@keyframes
9disableScroll {
10  0%{
11    height: 0;
12  }
13  100%{
14    height: auto;
15  }
16}

Codepenサンプル

投稿2020/08/26 01:01

編集2020/08/30 03:04

hatena19

総合スコア34075

退会済みユーザー

2020/08/26 11:05

ご返事いただき誠に感謝申し上げます。書いていただいたコードをもとに、以下のようにCSSを作成し直しましたが、改善が見られません・・・。HTMLは特に追記しなかったのですが、こちらHTMLの追記も必要でしょうか…？（HTMLコードについては、恐れ入りますが最初の質問を参照ください）お手数おかけしますが、こちらご確認のほどよろしくお願いします。サイトURL http://tabizukan-backpacker.com CSS（修正） .bg { width: 100vw; height: 100vh; background: #773c30; animation: bgAnime 1s linear 1.8s forwards; z-index: 2; position: relative; position:fixed; } .text { text-align: center; font-size: 6vw; color: #fff; height: 1em; line-height: 1.2; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 7; animation: textAnime2 .1s linear 1.5s forwards; position:fixed; } .text:after{ content: ""; width: 24vw; height: 1.2em; background: #773c30; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 9; animation: textAnime1 1.3s linear forwards; position:fixed; } body { animation: disableScroll .1s linear 2.8s both; } #home { z-index: 1; position: relative; } /*keyframe*/ @keyframes textAnime1 { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes textAnime2 { 0%{ transform: rotate(0); } 100%{ transform: rotate(-10deg); } } @keyframes bgAnime { 0%{ opacity: 1; } 99%{ opacity: 0; } 100%{ opacity: 0; display: none; } } @keyframes disableScroll { 0%{ overflow: hidden; } 100%{ overflow: auto; } }

hatena19

2020/08/26 11:20

http://tabizukan-backpacker.com を見てみましたが、アニメーション中はスクロールできなくなってるようですが。私が回答する前に確認したときは、スクロールできていたと記憶してますので、改善できてると思いますが。

退会済みユーザー

2020/08/26 11:36

ご覧いただきありがとうございます。現状としてアニメーション中にスクロールすると、トップページのトップ画面（最上部の画面）を開くことができず、スクロール後のトップページが表示されてしまいます。こちらをアニメーション中にスクロールしても、アニメーション終了後にきちんとトップページのトップ画面に戻るように修正したく思います。何度も失礼します。

hatena19

2020/08/26 12:39 編集

アニメーション後にナビゲーションのリンク等がクリックできないという現象のことをいっているのでしょうか。だとしたら、div.bg が前面にとどまったままなのが原因ですね。（スクロールうんぬんは関係ないです。）対処法を回答に追記しておきます。

退会済みユーザー

2020/08/26 12:49

ごめんなさい、今確認しましたところ、そのような課題も発覚しました。恐れ入りますが、よろしくお願いします。ただ、今解決したい問題としまして、アニメーション中に画面を下に進めると、アニメーション終了後にトップページのserachやinstagramなどの画面になってしまいます（※パソコンで開いた際の表示）。そこで、アニメーション中に画面を下に進めたとしても、最終的にアニメーションが終了した場合に、トップページのトップ画面（Digoutのロゴ部分）が表示されるようにしたいです。（何度も伝わりづらくて恐縮です）宜しくお願いします。

退会済みユーザー

2020/08/26 13:14 編集

クリックできない問題については解決しました。わざわざコードを書いていただき誠にありがとうございます。非常に助かります。続いて、恐れ入りますがアニメーション中に下へ移動した際に、アニメーション後の画面表示がそのまま下へ移動してしまう問題について解決したく思います。具体的には、アニメーション中に画面を下に進めると、アニメーション終了後にトップページのserachやinstagramなどの画面になってしまいます（※パソコンで開いた際の表示）。そこで、アニメーション中に画面を下に進めたとしても、最終的にアニメーションが終了した場合に、トップページのトップ画面（Digoutのロゴ部分）が表示されるようにしたいです。（何度も伝わりづらくて恐縮です）宜しくお願いします。

hatena19

2020/08/26 13:22

「アニメーション中に画面を下に進めると」とのことですが、アニメーション中はスクロールできないと思いますが、どのような操作をしてますか。ブラウザは何を使ってますか。私はChromeで確認してます。

退会済みユーザー

2020/08/26 13:48

ご返事ありがとうございます。こちらはSafariを利用しています。今、Chromeで確認したところ、確かにアニメーション中はスクロールできないことを確認しました。仕様の問題かと思うので何とも言えないところではございますが、Safari対応ではどういった改善の策を促せば良いでしょうか・・・。

hatena19

2020/08/26 14:51

Safari を試せる環境がないので、確実な回答は難しいですが、 body {overflow: hidden;} を設定したときスクロールできますか。スクロールできないなら、これを設定してお丁、JSでアニメーション終了後に削除するという方法にすればいいでしょう。スクロールできてしまうなら、私からこれ以上の回答は難しいです。

hatena19

2020/08/26 14:54

検索してみたら下記を見つけました。 iOSはoverflow:hidden;でスクロールを無効にできない - Qiita https://qiita.com/mimoe/items/f5f668cebb697d073553 参考になりませんか。

退会済みユーザー

2020/08/28 23:59

ご提示ありがとうございます。いただいたurlなどをもとに、いろいろ調べて行っていますが、 // スクロールを無効にする $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); // スクロール無効を解除する $(window).off('.noScroll'); windowの部分をbgにすればできると思いますが、上記のコードをphpのどこに挿入すればいいかわからず…まだ実装できていない次第です。

hatena19

2020/08/29 01:35

私の使用しているテーマだと、子テーマの編集のところにJaveScriptを記述する場所があります。調べてみてください。ない場合はプラグインがありますのでこれも調べてみてください。

hatena19

2020/08/29 01:37

CSSでやる別案を考えてみました。ただiOSで有効かどうかは確認してません。 ,home は ,bg 以外の部分を囲むブロックです。 .home { z-index: 1; position: relative; animation: disableScroll .1s linear 2.8s both; height: 0; overflow: hidden; } @keyframes disableScroll { 0%{ height: 0; } 100%{ height: auto; } }

退会済みユーザー

2020/08/30 02:27

ありがとうございます。無事実装することができ、Safariなどにおいてスクロールを無効化することができました！しかし、ご教示いただいたコードで実装したところ、アニメーション後のトップページのスクロールが止まってしまいました・・・。あともう一歩なのですが、こちらどうにならないでしょうか・・・。 p.s 繰り返し親身に解決策を考えて提示してくださって本当にありがとうございます。非常に勉強になっています。

hatena19

2020/08/30 03:05

回答にサンプルを追加しましたので、それを参考にしてください。

退会済みユーザー

2020/08/31 13:32

お世話になっています。本当にお陰様で、あと一歩のところまで来ました。スマホやタブレットで開いた際に、無事スクロールを無効化することができました！しかしながら、モバイルフッターメニューが表示されてしまいます。今回はご教示いただいたコードをもとに下記リンクのようにコードを記述したのですが、このままではスマホで開いた際にアニメーション最中にモバイルフッターメニューが表示されてしまいます・・・。 https://codepen.io/jcqvayeu/pen/ExKvgVO 誠に恐れ入りますが、モバイルフッターメニューの非表示の方法についてご教示をお願いします。（使用テーマはcocoonです。モバイルフッターメニューのcss部分は仮置きでお願いします。。）サイトURL： http://tabizukan-backpacker.com

hatena19

2020/08/31 13:52

サイトを検証ツールでみたところ、モバイルフッターメニュー(.mobile-menu-buttons)は、z-index: 2; になってますので、.bg の z-index がそれより大きくなるように設定すればどうでしょうか。 @keyframes bgAnime { 0%{ opacity: 1; z-index: 3; /* 修正 */ } 99%{ opacity: 0; z-index: 3; /* 修正 */ } 100%{ opacity: 0; z-index: -1; } }

退会済みユーザー

2020/08/31 23:24

おはようございます。記述いただいた通り、z-indexを2にして、画面の前後関係を調整しましたが、やはりうまくいきません・・・。 tabizukan-backpacker.com

hatena19

2020/09/01 13:05 編集

下記も修正してみてください。 .bg { width: 100vw; height: 100vh; background: hsl(10deg 43% 33%); animation: bgAnime .1s linear 1.8s forwards; z-index: 3; /* 修正 */ position: relative; position: fixed; }

退会済みユーザー

2020/09/01 12:33

.bgも変えましたが、やはりできません・・・。

退会済みユーザー

2020/09/01 12:38

追記ですみません。一応cssコードで .mobile-footer-menu-buttons{ display: none; } で非表示にはなるのですが、これをアニメーション中に非表示にするにはどのようにすればいいのかわからないところです・・・。

hatena19

2020/09/01 13:06 編集

「display は @keyframes の対象外のプロパティ」とすでに回答してますよ。 visibility を使うといいかもしれません。 visibility - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/visibility#Interpolation @keyframes bgAnime { 0%{ visibility: hidden; } 100%{ visibility: visible; } }

退会済みユーザー

2020/09/01 13:23

そうでしたね、失礼しました。なお、上記コードを追記しましたところ、こちらのようになってしまいました。。 http://tabizukan-backpacker.com

hatena19

2020/09/01 13:33

bgAnimeじゃなかった。bgAnimeは元に戻しておいてください。 .mobile-footer-menu-buttons{ animation: mobile-menu-anime 0s linear 2.8s } @keyframes mobile-menu-anime { 0%{ visibility: hidden; } 100%{ visibility: visible; } }

退会済みユーザー

2020/09/01 13:57

やはりうまくいかないようです・・・。

hatena19

2020/09/01 14:35

モバイルフッターメニューを追加したサンプルではうまくいってます。 https://codepen.io/hatena19/pen/JjXJZVO 同じ考え方で設定すればうまくいくはずですので、頑張ってください。

退会済みユーザー

2020/09/09 13:52

遅くなって申し訳ございません！こちらうまくいったようです...! URL：http://tabizukan-backpacker.com ありがとうございましたm(_ _)m 本当に親身にアドバイスいただいてなんと御礼申し上げればいいかわかりません。ページのカスタマイズ成功とともに私自身とても勉強になりました。本当にありがとうございます！！！

行動規範の内容に同意します