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> 

Answer 2

I found the solution.

Just add a div to wrap the title and the image vertical and horizontal center with a height.

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

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