html, body { background: black; padding: 0; margin: 0; } section{ height: 100vh; } .inner{ height: 80%; width: 100%; position: relative; overflow: hidden; } .text{ position: absolute; top: 50%; transform: translateY(-50%); text-align: center; z-index: 3; font-size: 30px; font-weight: bold; color: white; left: 0; right: 0; } .bg{ position: absolute; top: 0%; bottom: 0%; height: 100%; width: 100%; } .img{ background-image: url(https://twotone.me/wp-content/uploads/2020/06/waterfall.jpg); background-position: center top; background-repeat: no-repeat; background-size:cover; height: 100%; width:100%; }
これはテスト
これはテスト
これはテスト
これはテスト
これはテスト
jQuery(function($){ $(document).scroll(function() { $("section").each(function(){ var imgPos = $(this).offset().top;//画像の位置 var scrollPos = $(window).scrollTop();//現在位置 var windowHeight = $(window).height();//ウィンドウサイズ var imgRange = imgPos + $(this).innerHeight();//画像範囲 var contentTop = scrollPos + windowHeight - imgPos;//画像内の位置情報(scrollTop関数の代わり) $('.img').css('background-size','auto ' + (windowHeight + $(this).innerHeight() / 20) +'px');//画像のリサイズ if(scrollPos+windowHeight > imgPos && scrollPos < imgRange ){//画像が画面内に少しでも入ったらtrue $(this).find('.img').css({ "background-position-y": (-contentTop / 20)//背景画像をスクロールに合わせて上にずらす }) } }); }); });
【jQuery】スクロールに合わせて背景画像が上にずれるパララックス(複数対応)
2020/06/05