Question

我有这个简化代码来为我的图像添加视差。

当我开始滚动时，顶部值不正确。距离太大，当我回到网站顶部时，图片不像开头那样居中。

如何计算正确的最高值？

＆＃13;

$(document).ready(function(){
	var scrolledDefault = $(window).height() / 2 - ($('.img__moi').height() / 2) + 25;
  	$('.img__moi').css('top', scrolledDefault);
	$(window).scroll(function(e){
  		parallax('.img__moi', '0.2');
	});

	function parallax(element, vitesse){
		var scrolled = $(window).scrollTop() + ($(window).height() / 2) - ($(element).height() / 2) + 25;
		console.info(scrolled*vitesse);
		$(element).css('top',-(scrolled*vitesse)+'px');
	}
});

＆＃13;

body{
  background-color:#cccccc;
  height:3000px;
}
.align__text{
  position:absolute;
  top:calc(50% + 30px);
  left:calc(25% + 20px);
  width:70%;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  z-index:2;
}
.header__top{
  background-color:$blanc;
  padding:5px 0px;
  height:50px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999999;
}
.img__moi{
  float:left;
  width:25%;
  position:absolute;
  margin-left:50px;
  z-index:2;
  transition:all 300ms ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="header__top"></div>
<img src="http://img15.hostingpics.net/pics/317625pexelsphoto.jpg" class="img__moi">
			<div class="align__text">
				<h1>The title here<br/> Two line</h1>
			</div>
</header>

＆＃13;

Answer 1

或者，如果您稍微重新安排数学，那么您可以更轻松地将其设置应用于其他div，而无需将其包裹起来：

＆＃13;

var moi = '.img__moi'; // defining the key image classname here

function scrollDef(el) {
    var scrolledDefault = $(window).height() - $(el).height(); // or use $('body).height() to center div relative to the scroll area
    scrolledDefault = scrolledDefault / 2;
    scrolledDefault += 25;
    return scrolledDefault;
  } // DRY: by calculating scroll top in this way we ensure its defined in one way for greater parity 

function parallax(element, vitesse) {
  var scrolled = scrollDef(element) - ($(window).scrollTop() * vitesse); // have rearranged the maths slightly to make this work
  $(element).css('top', scrolled);
}

$('.img__moi').css('top', scrollDef(moi));
// you could replace the above line with   parallax('.img__moi', 0.2); to set the same starting condition

$(window).scroll(function() {
  parallax('.img__moi', 0.2);
});

＆＃13;

body,
html {
  background-color: #cccccc;
  height: 3000px;
}
.align__text {
  position: absolute;
  top: calc(50% + 30px);
  left: calc(25% + 20px);
  width: 70%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
}
.header__top {
  background-color: $blanc;
  padding: 5px 0px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
}
.img__moi {
  float: left;
  width: 25%;
  position: absolute;
  margin-left: 50px;
  z-index: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="header__top"></div>
  <img src="http://img15.hostingpics.net/pics/317625pexelsphoto.jpg" class="img__moi">
  <div class="align__text">
    <h1>The title here<br/> Two line</h1>
  </div>
</header>

＆＃13;

Answer 2

我找到了解决方案。

只需添加一个div来包装标题和图像垂直和水平中心的高度。

＆＃13;

$(document).ready(function() {
  var scrolledDefault = $(window).height() / 2 - ($('.img__moi').height() / 2) + 25;
  $('.img__moi').css('top', scrolledDefault);
  $(window).scroll(function(e) {
    parallax('.img__moi', '0.2');
  });

  function parallax(element, vitesse) {
    var scrolled = $(window).scrollTop() + ($(window).height() / 2) - ($(element).height() / 2) + 25;
    console.info(scrolled * vitesse);
    $(element).css('top', -(scrolled * vitesse) + 'px');
  }
});

＆＃13;

body {
  background-color: #cccccc;
  height: 3000px;
}
.align__text {
  position: absolute;
  top: 50%;
  left: calc(25% + 20px);
  width: 70%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
}
.header__top {
  background-color: $blanc;
  padding: 5px 0px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
}
.img__moi {
  float: left;
  width: 25%;
  position: absolute;
  top:0;
  margin-left: 50px;
  z-index: 2;
  transition: all 300ms ease;
}
.align__center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 61vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="header__top"></div>
  <div class="align__center">
    <img src="http://img15.hostingpics.net/pics/317625pexelsphoto.jpg" class="img__moi">
    <div class="align__text">
      <h1>The title here<br/> Two line</h1>
    </div>
  </div>
</header>

＆＃13;

中心视差图像

2 个答案: