Q&A
プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
質問はコード内にあります、また画像はここでは（画像）と表記しています
<!DOCTYPE html> <head> <meata lang="ja"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="design.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> </head> <body> <header> <div class="title">Title</div> <div class="navToggle"> <div> <span></span> <span></span> <span></span> </div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">What is it?</a></li> <li><a href="#">Contact</a></li> <li><a href="#">twitter</a></li> </ul> </header> <div class="main"> 在学中に同級生の原田健と共に「陸上部」というコンビで活動していた[4]。渡辺正行主催のお笑いライブ「ラ・ママ新人コント大会」の情報を同級生から得てオーディションに参加[要出典]。以後も出演することになる[要出典]。高校卒業の際に渡辺から進路を尋ねられお笑いを続けたい意向を示した所、渡辺の事務所に誘われ1990年に正式に芸能界入り[要出典]。 しかし、原田が結婚を理由に芸能界から引退することとなり「陸上部」は解散する[要出典]。一方的に解散を告げられたために日村はショックを受けたが、原田の結婚相手は二人の高校の同級生であり、その人に告白しろとしかけたのは高校時代の日村であった[要出典]。 その後一年間程は、テレビの再現ビデオに出演したり、1994年3月公開の『横浜ばっくれ隊 夏の湘南純愛篇』のツッパリ役や『機動警察パトレイバー 2 the Movie』にチョイ役の声優として出演したり、細々と芸能活動を続けていた[要出典]。しかし、1993年10月に西秋元喜から「四人でお笑いをやろう」と誘われ、その集まりの席で現在の相方である設楽統と出会う[要出典]。その後まもなく、四人組から設楽と日村が脱退する形で現在のバナナマンが結成された[要出典]。 2008年12月31日から2009年1月3日までの出演数が19番組と、最も出演番組が多い芸人だった。同率2位には15番組でFUJIWARAやはるな愛などがおり、相方の設楽は同率4位の13番組だった[5]。 人物[編集] 家族構成は父、母、兄[6]。趣味はビリヤード、相撲。アコースティック・ギター[6]やピアノの演奏もできる。2008年にレーシックを受け、視力が良くなったが、かつては自宅で度入りのサングラスをして生活していた。また、2011年にインプラントの治療も受けた[7]。 名前[編集] バカリズムによると、高校時代の友人から「バイブ」と呼ばれていたことがある[2]。2010年7月16日放送のバナナマンのバナナムーンGOLDにて、設楽が日村本人に確認したところ事実ということが判明[8]。バカリズムによると、日村は「たぶん仲間内で話をしているうちに携帯のバイブが鳴っちゃって、それからバイブと呼ばれ始めたのかな」と語っていた[2]。後日、その友人に確認を取ったところ、電動こけしのバイブに似ていたからと判明した[2]。 </div> <div class="picture"> <img src="（画像)"> </div> <div class="picture"> <img src="(画像)"> </div> <div class="picture"> <img src="(画像)"> </div> <script> $('.navToggle').on('click',function(){ $('header ul').toggleClass('showing'); }); $(function(){ var header = $('header'); $(window).scroll(function(){ if($(window).scrollTop() > 50){ header.addClass('header_scrolled'); }else{ header.removeClass('header_scrolled'); } }) }); if(window.matchMedia('(max-width:780px)').matches){ $(window).scroll(function(){ if($(window).scrollTop() > 50){ $('header ul').css("top","64px"); }else{ $('header ul').css("top","128px"); } }) } //↓ここのif(isInView)の中が反応しないです $(function(){ $('.picture').css('opacity',0); $('.picture').on('inview',function(event,isInView,visiblePartX,visiblePartY){ if(isInView){ $(this).stop().addClass('inview_picture'); }else{ $(this).stop()removeClass('inview_picture'); } }); }); </script> </body>
body{ padding:0; margin:0; } a{ text-decoration: none; } header{ position:fixed; top:0px; left:0px; width:100%; height:8em; background-color: #F5A9A9; -webkit-transition: all 0.4s; -ms-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .title{ font-size: 40px; color:white; font-family: arial black; position:absolute; left: 5%; top:50%; margin:auto; transform: translateY(-50%); } .navToggle{ display:none; position:absolute; right:20px; top:0; bottom:0; margin:auto; width:30px; height:25px; cursor:pointer; border:solid 1px white; padding:5px 5px 0 5px; border-radius: 5px; } .navToggle div{ position: relative; } .navToggle span{ display:block; width:100%; border-bottom:solid 3px white; margin-bottom:5px; } header ul{ position:absolute; right:5%; bottom:0; margin:auto; display:table; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } header ul li{ border-right:solid white 0.5px; color:black; display:table-cell; padding-right:10px; padding-left: 10px; font-size: 15px; cursor:pointer; } header ul li a{ color:black; } .header_scrolled{ height:4em; } @media screen and (max-width:780px){ .navToggle{ display:block; } .showing{ bottom:0; left:0; right:0; max-height:20em; } header ul{ max-height: 0; position:relative; right:0px; display:block; width:100%; padding:0; overflow: hidden; background-color:rgba(0,0,0,0.8); } header ul li{ box-sizing:border-box; width:100%; padding:15px; display:block; text-align: center; border-bottom:solid 1px #777; } header ul li a { color:white; } } .main{ margin-top: 128px; padding:30px; } .picture{ float:left; width:33.333%; opacity:0; transform: translate(0,40px); -webkit-transform: translate(0,40px); } /* ここがinviewで追加するclass */ .inview_picture{ opacity:1; transform: translate(0,0); -webkit-transform: translate(0,0); } .picture img{ height:200px; display: block; margin:0 auto; } @media screen and (max-width:780px){ .picture{ width:80%; margin:0 auto; } .picture img{ max-height:500px; } }
回答1件
0
ベストアンサー
jqueryのバージョンと、inview.jsを違うものに変えてみたら動作するようになりました。
(google chrome で確認しました。)
inview.jsは、以下からダウンロードして入手しました。
https://github.com/protonet/jquery.inview
★変更点
・headタグ内のjqueryの読み込みを古いバージョンにしました。
・inview.jsも上記のものに変更しました。
・$(this).stop().removeClass('inview_picture');
★私が試してみたサンプルコード↓
<!DOCTYPE html> <head> <meata lang="ja"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="design.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="jquery.inview.min.js"></script> </head> <body> <header> <div class="title">Title</div> <div class="navToggle"> <div> <span></span> <span></span> <span></span> </div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">What is it?</a></li> <li><a href="#">Contact</a></li> <li><a href="#">twitter</a></li> </ul> </header> <div class="main"> 在学中に同級生の原田健と共に「陸上部」というコンビで活動していた[4]。渡辺正行主催のお笑いライブ「ラ・ママ新人コント大会」の情報を同級生から得てオーディションに参加[要出典]。以後も出演することになる[要出典]。高校卒業の際に渡辺から進路を尋ねられお笑いを続けたい意向を示した所、渡辺の事務所に誘われ1990年に正式に芸能界入り[要出典]。 しかし、原田が結婚を理由に芸能界から引退することとなり「陸上部」は解散する[要出典]。一方的に解散を告げられたために日村はショックを受けたが、原田の結婚相手は二人の高校の同級生であり、その人に告白しろとしかけたのは高校時代の日村であった[要出典]。 その後一年間程は、テレビの再現ビデオに出演したり、1994年3月公開の『横浜ばっくれ隊 夏の湘南純愛篇』のツッパリ役や『機動警察パトレイバー 2 the Movie』にチョイ役の声優として出演したり、細々と芸能活動を続けていた[要出典]。しかし、1993年10月に西秋元喜から「四人でお笑いをやろう」と誘われ、その集まりの席で現在の相方である設楽統と出会う[要出典]。その後まもなく、四人組から設楽と日村が脱退する形で現在のバナナマンが結成された[要出典]。 2008年12月31日から2009年1月3日までの出演数が19番組と、最も出演番組が多い芸人だった。同率2位には15番組でFUJIWARAやはるな愛などがおり、相方の設楽は同率4位の13番組だった[5]。 人物[編集] 家族構成は父、母、兄[6]。趣味はビリヤード、相撲。アコースティック・ギター[6]やピアノの演奏もできる。2008年にレーシックを受け、視力が良くなったが、かつては自宅で度入りのサングラスをして生活していた。また、2011年にインプラントの治療も受けた[7]。 名前[編集] バカリズムによると、高校時代の友人から「バイブ」と呼ばれていたことがある[2]。2010年7月16日放送のバナナマンのバナナムーンGOLDにて、設楽が日村本人に確認したところ事実ということが判明[8]。バカリズムによると、日村は「たぶん仲間内で話をしているうちに携帯のバイブが鳴っちゃって、それからバイブと呼ばれ始めたのかな」と語っていた[2]。後日、その友人に確認を取ったところ、電動こけしのバイブに似ていたからと判明した[2]。 </div> <div class="picture"> <img src="test.jpg"> </div> <div class="picture"> <img src="test.jpg"> </div> <div class="picture"> <img src="test.jpg"> </div> <script> $('.navToggle').on('click',function(){ $('header ul').toggleClass('showing'); }); $(function(){ var header = $('header'); $(window).scroll(function(){ if($(window).scrollTop() > 50){ header.addClass('header_scrolled'); }else{ header.removeClass('header_scrolled'); } }) }); if(window.matchMedia('(max-width:780px)').matches){ $(window).scroll(function(){ if($(window).scrollTop() > 50){ $('header ul').css("top","64px"); }else{ $('header ul').css("top","128px"); } }) } //↓ここのif(isInView)の中が反応しないです $(function(){ $('.picture').css('opacity',0); $('.picture').on('inview',function(event,isInView,visiblePartX,visiblePartY){ if(isInView){ $(this).stop().addClass('inview_picture'); console.log("出現ッ！"); }else{ $(this).stop().removeClass('inview_picture'); console.log("隠れろォ！"); } }); }); </script> <style> body{ padding:0; margin:0; } a{ text-decoration: none; } header{ position:fixed; top:0px; left:0px; width:100%; height:8em; background-color: #F5A9A9; -webkit-transition: all 0.4s; -ms-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .title{ font-size: 40px; color:white; font-family: arial black; position:absolute; left: 5%; top:50%; margin:auto; transform: translateY(-50%); } .navToggle{ display:none; position:absolute; right:20px; top:0; bottom:0; margin:auto; width:30px; height:25px; cursor:pointer; border:solid 1px white; padding:5px 5px 0 5px; border-radius: 5px; } .navToggle div{ position: relative; } .navToggle span{ display:block; width:100%; border-bottom:solid 3px white; margin-bottom:5px; } header ul{ position:absolute; right:5%; bottom:0; margin:auto; display:table; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } header ul li{ border-right:solid white 0.5px; color:black; display:table-cell; padding-right:10px; padding-left: 10px; font-size: 15px; cursor:pointer; } header ul li a{ color:black; } .header_scrolled{ height:4em; } @media screen and (max-width:780px){ .navToggle{ display:block; } .showing{ bottom:0; left:0; right:0; max-height:20em; } header ul{ max-height: 0; position:relative; right:0px; display:block; width:100%; padding:0; overflow: hidden; background-color:rgba(0,0,0,0.8); } header ul li{ box-sizing:border-box; width:100%; padding:15px; display:block; text-align: center; border-bottom:solid 1px #777; } header ul li a { color:white; } } .main{ margin-top: 128px; padding:30px; } .picture{ float:left; width:33.333%; opacity:0; transform: translate(0,40px); -webkit-transform: translate(0,40px); } /* ここがinviewで追加するclass */ .inview_picture{ opacity:1 !important; transform: translate(0,0); -webkit-transform: translate(0,0); } .picture img{ height:200px; display: block; margin:0 auto; } @media screen and (max-width:780px){ .picture{ width:80%; margin:0 auto; } .picture img{ max-height:500px; } } </style> </body>
お役に立てれば幸いです。
投稿2017/05/08 07:42
退会済みユーザー
総合スコア0
回答ありがとうございます！
ご指摘の通りしてみましてconsole.logの[出現ッ!]は出るのですが、肝心の画像が表示されません。。。 opacityを１にすると普通に見れるので画像自体は取り込めてると思います。
またjquery.inviewはできればcdnが良いのですが、それだと厳しいでしょうか？？
inviewの関数内の
$('.picture').css('opacity',0);
このコードを削除すれば画像が現れました！ しかし下までスクロールするとまた消えてしまいます。。。
>>しかし下までスクロールするとまた消えてしまいます
一度出現させた要素は、ずっと出現したままにしたいということでしょうか？
でしたらinviewイベントをつける際の処理を下記のように改造すれば良いかなと思います。
$('.picture').on('inview',function(event,isInView,visiblePartX,visiblePartY){
//inview_pictureクラスがついていなければ処理する
if(!$(this).hasClass("inview_picture")){
if(isInView){
$(this).stop().addClass('inview_picture');
console.log("出現ッ！");
}
}
});
画面内に入った時に inview_pictureクラスがつくので、それを判断基準にして、一度クラスがついた要素に関しては無視するようにしています。（画面外にでた時の処理はいらなくなるので消しました）
>>cdnに関して
バージョンが違うようなので(cdnのほうが1.0.0で、私が使用したのが1.1.2です) 動作がちょっと違うみたいですが、下記の点が大丈夫であれば問題ないかもです。
↓
★私が inview 1.0.0で気になった点（使わなかった理由）
1.0.0のほうは「初めから画面に入っている要素」に関して動作しない（クリックなど、１アクションないと発動しない）ようだったので、最新版をダウンロードして使用させていただきました。
機能しました。 分かりやすい説明ありがとうございました、また回答してもらえたらありがたいです！
あなたの回答
tips
プレビュー
