Q&A
【やりたい事】
fullpage.jsを使用して、全画面の画面単位でスクロールするサイトを作っています。
画面単位でスクロールした後、inview.jsを用いて、要素をふわっと表示させたいと思います。
【現状】
fullpage.jsは、正常に動作しています。しかし、inview.jsがうまく動作しません。
cssで非表示、opacity:0にした要素を、ビューポート内に入ると、opacity:1に変化させたいのですが、opacity:0のままです。
試したこと】
似たような質問を見たり調べたりして、様々なコードを試してみましたが、うまく行きませんでした。
JS初心者の為、よろしくお願いいたします。
html
1<html> 2<head> 3 <title></title> 4<link rel="stylesheet" href="style.css"> 5<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css"> 6<link rel="stylesheet" type="text/css" href="css/4-1-4.css"> 7</head> 8<body> 9 10<div id="fullPage"> 11<div class="section s1"> 12</div> 13<div class="section s2"> 14<div class="fade"> 15 <p>ああああああああああああああ</p> 16</div> 17</div> 18<div class="section s3"> 19</div> 20<div class="section s4"> 21</div> 22<div class="section s5"> 23</div> 24<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 25<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script> 26<script src="my.js"></script> 27<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> 28</body> 29 <?php get_footer(); ?> 30 31 32</html>
css
1.fade {opacity: 0;transition: 5s;} 2.fade-in {opacity: 1;} 3.header{height:0;} 4div.content-in{width:100%;} 5.content{margin-top:0;} 6.main{padding:0;} 7.s1{background: #e5cf54;} 8.s2{background: #34558B;} 9.s3{background: #e5cf54;} 10.s4{background: #34558B;} 11.s5{background: #e5cf54;} 12nav.NavMenu{position: fixed;z-index: 12;top: 0;left: 0;background: #34558B;text-align: center;width: 100%;height: 100%;display: none;} 13nav.NavMenu ul{width: 100%;margin: 0 auto;padding: 0;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);} 14nav.NavMenu ul li{font-size: 24px;list-style-type: none;width: 100%;padding-bottom: 0px;} 15nav.NavMenu ul li:last-child{padding-bottom: 0;} 16nav.NavMenu ul li a{display: block;color: #fff;padding: 15px 0;font-weight: bold;font-size: 18px;text-decoration:none;} 17.Toggle {position: fixed;right:25px;top: 15px;width: 45px;height: 45px;cursor: pointer;z-index: 13;display: block;} 18.Toggle span {display: block;position: absolute;width: 35px;border-bottom: solid 4px #fff;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;left: 6px;} 19.Toggle span:nth-child(1) {top: 9px;} 20.Toggle span:nth-child(2) {top: 20px;} 21.Toggle span:nth-child(3) {top: 31px;} 22.Toggle.active span:nth-child(1) {top: 18px;left: 6px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);border-bottom: solid 3px #fff;} 23.Toggle.active span:nth-child(2),.Toggle.active span:nth-child(3) {top: 18px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);border-bottom: solid 3px #fff;}
javascript.js
1$('#fullPage').fullpage({ 2 navigation: true, 3 anchors:['section1','section2','section3','section4','section5'], 4 controlArrows:false, 5 slidesNavigation:true 6}) 7 8$(function () { 9 $('.Toggle').click(function () { 10 $(this).toggleClass('active'); 11 12 if ($(this).hasClass('active')) { 13 $('.NavMenu').addClass('active'); 14 $('.NavMenu').fadeIn(500); 15 } else { 16 $('.NavMenu').removeClass('active'); 17 $('.NavMenu').fadeOut(500); 18 } 19 }); 20 21 $('.navmenu-a').click(function () { 22 $('.NavMenu').removeClass('active'); 23 $('.NavMenu').fadeOut(1000); 24 $('.Toggle').removeClass('active'); 25 }); 26}); 27 28 29 $('.NavMenu ul li a[href]').on('click', function(event) { 30 $('.Toggle').trigger('click'); 31 $('.fade').addClass('.fade-in') 32}); 33 34 $('.fade').on('inview', function(event, isInView) { 35 if (isInView) { 36 if (isInView) { 37 $(this).addClass('.fade-in'); 38 } 39 } 40 }); 41
回答1件
0
ベストアンサー
問題が二つあります。
ひとつ目は、ご使用になっている zuk さんの jquery.inview は、おそらく、jQuery2 以降の新しいバージョンの jQuery に対応していなさそうです。
1.11.2等のバージョンでは動くようですが、ご提示のコードで試してみたところ動作しなかったので、相性の問題があるかもしれません。
zuk さんの jquery.inview をフォークした、protonetさんの jquery.inview を試してみてはどうでしょうか。あるいは、標準の Intersection Observer でもいいかもしれません。
GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ふたつ目ですが、addClassの使い方が間違っているようです。
js
1$(this).addClass('.fade-in'); // ドットはいらない
投稿2022/02/15 03:16
総合スコア37488
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/02/15 05:11