いつもお世話になっております。
ウェブサイトでよくみかける、スクロールをしていくとフワッと現れるアニメーション を実装したところ、
表題にもあるように、iOSでのみスクロールが止まってしまう問題が起きてしまいました。(AndroidやPCでは問題ないようです)
どなたかご存知の方がいましたら、お力を貸して頂けないでしょうか?
起きている問題
・じっくり見るようにゆっくりとスクロールする分には、スクロールは引っかかりません。
・ササッと早くスクロールしようとすると、該当のcssアニメーションが起きる地点で、一度ピタッと止まってしまいます。(そこからスクロールを再開することは可能な状態です。)
試したこと・調べたこと
・transform: translate3d(0,0,0); をつける
・will-change: transform; をつける
・https://teratail.com/questions/10632 こちらの質問者と同じような現象が生じているのだと思いますが、回答者によりますと「iOS8からは改善されてたみたい」とあり、解消されているはずなのですが(検証端末はiOS12なため)、カタついたままです。
js
1/* スクロールでフェードインアニメ */ 2var posi_top,wih_half,current_view; 3 4$(window).load(function(){ 5 6 var wih = window.innerHeight; 7 var wih_half = wih*3/5; 8 current_view = wih_half; 9 set_posi(); 10}); 11 12$(window).resize(function() { 13 14 var wih = window.innerHeight; 15 var wih_half = wih*3/5; 16 current_view = wih_half; 17 set_posi(); 18}); 19 20$(window).scroll(function(){ 21 22 var wih = window.innerHeight; 23 var wih_half = wih*3/5; 24 current_view = $(this).scrollTop() + wih_half; 25 set_posi(); 26 27}); 28 29function set_posi(){ 30 31 $('.anime_center').each(function() { 32 var posi = $(this).offset(); 33 posi_top = posi.top; 34 35 //初回のみ 36 if(current_view > posi_top){ 37 $(this).addClass('do'); 38 } 39 }); 40 41}
scss
1.anime_center{ 2 visibility: hidden; 3} 4.do{ 5 animation-duration: 2s; 6 animation-name: RightToLeft; 7 animation-iteration-count: 1; 8 animation-fill-mode:forwards; 9 visibility: visible; 10} 11 12/* 「RightToLeft」の動作内容 */ 13@keyframes RightToLeft { 14 0% { 15 opacity: 0; 16 transform: translateX(50px);/* X軸方向に50px */ 17 text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.00); 18 } 1940%{ 20 text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.30), 6px 0px 15px rgba(255, 255, 255, 0.80); 21} 22 100% { 23 opacity: 1; 24 transform: translateX(0); 25 text-shadow: -6px 0px 15px rgba(255, 255, 255, 0.0), 6px 0px 15px rgba(255, 255, 255, 0.0); 26 } 27}
※htmlは省いております。anime_centerというクラス名を要素にもたせ、画面上から3分の5の高さにくると、フワッとでてくる、という仕組みとなっております。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。