0
チュートリアルからコピーした視差スクロールコードを使用する画像の幅を変更することはできません。私は画像の例でdivボックスと画像が完全に整列していないことを知っていますが、何らかの理由で私の壁紙サイズの画像を使っていませんでした。 div間隔の問題。視差スクロールを使用する画像の幅を変更できません
Jsfiddle - https://jsfiddle.net/fouvdjm8/1/
HTMLコード
<html>
<!doctype html>
<head>
<title>Parallax Scrolling Tutorial</title>
<!-- CSS Code -->
<link rel="stylesheet" href="style.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article></article>
</section>
<div id="box"></div>
</body>
</html>
CSSコードあなたのCSSのホームクラスは番目のようになります
body{
margin:0;
padding:0;
}
#home {
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#box {
height: 1000px;
width: auto;
background-color: blue;
}
JSコード
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop()/$bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
画像を100％幅にしたいですか？ – ketan