Center parallax image

Question

I have this simplify code to add parallax to my image.

When I start scrolling, the top value is incorrect. The distance is too big and when I come back at the top of the website the picture is not centered like the beginning.

How do I calculate the right top value?

$(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');
	}
});

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;
}

<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>

Answer 1

Alternatively, if you rearrange your maths a little you have a set-up that's perhaps easier to apply to other divs without having to wrap them:

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);
});

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;
}

<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>