上記のサイトのように画像が浮上してくる感じのを
transformをaddClassすることで試しにやってみたんですが、
なぜか思い通りにいきません。どなたか教えて下さい。
HTML5
1コード <div id="float-food"> 2 <figure class="fes-food" id="banana"><img src="images/choco-banana.png" alt=""></figure> 3 <figure class="fes-food" id="candy"><img src="images/candy.png" alt=""></figure> 4 </div>
CSS3
1コード #candy { 2 position: absolute; 3 top: 1000px; 4 right: 20px; 5} 6 7#banana { 8 position: absolute; 9 top: 2000px; 10 left: 20px; 11} 12 13.fes-food { 14 opacity: 0; 15} 16 17.fes-food.fadein { 18 opacity: 1; 19 transform: translateY(-100px); 20 transition:all .7s; 21}
javascript
1コード $(function(){ 2 3 $(window).scroll(function(){ 4 5 $('.fes-food').each(function(){ 6 7 var elemPos = $(this).offset().top; 8 9 var scroll = $(window).scrollTop(); 10 11 var windowHeight = $(window).height(); 12 13 if (scroll > elemPos - windowHeight) { 14 15 $(this).addClass('.fadein'), 16 17 $(this).removeClass('.fadein'); 18 19 } 20 21 }); 22 23 }); 24 25});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/14 06:58