前提・実現したいこと
コーポレートサイトを制作しています。
要素にスクロールフェードインをつけたくて、あまり知識がない私は
サイトから拾ってきたjQueryのコードをコピペで実装しました。
発生している問題・エラーメッセージ
うまいこと実装できたのですが、スマホで見ると、ブラウザの戻るボタンや
スワイプでページを戻ったときに、要素が動いてしまうようになりました。
だんだん縮小されたり、ボタンが一瞬横に動いたり、、。
このjQueryが原因だという確証もないのですが。。
transitionがおかしな風に効いているのかもしれません。
該当のソースコード
HTML <div class="viewmore fadein"> <a href="/news"><div class="btn" > VIEW MORE</div></a> <div class="cf"></div> </div> CSS .fadein { opacity: 0; transform : translate(0, 50px); transition : all 1500ms; } .fadein.scrollin{ opacity: 1; transform: translate(0, 0); } jQuery $(window).scroll(function (){ $('.fadein').each(function(){ var elemPos = $(this).offset().top, scroll = $(window).scrollTop(), windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 100){ $(this).addClass('scrollin'); } }); });
試したこと
ネットで調べて以下のコードを追記してみたりしましたが治りませんでした。
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
CSSの「transition:all 1500ms」を消してフェードインさせたい各クラスに指定しましたが治りませんでした。
あなたの回答
tips
プレビュー