wordpress(使用テーマ:cocoon)でサイトを作成しています。
前回こちらのサイトを通して、サイトを開いときに始まるオープニングアニメーション時に、スクロールを無効にする機能を実装しました。
しかし、Safariなどスマートフォンで開く際に、スクロール無効ができていないことに気がつきました。
アニメーションのコードは以下になります。
サイト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;
}
}
なお、Safariなどでスクロールを無効にするコードは、
// スクロールを無効にする
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});
// スクロール無効を解除する
$(window).off('.noScroll');
と存じます。
このwindowの部分をbgにすればよいのでしょうか。また、このスクロール無効のコードはどの部分に記述すればよいのでしょうか。
やや、煩雑な質問で恐れ入ります。
よろしくお願いいたします。
Q&A
