中心視差圖像

Question

我有這個簡化代碼來爲我的圖像添加視差。

當我開始滾動時，最高值不正確。距離太大，當我回到網站的頂部時，圖片不像開頭那樣居中。

如何計算正確的最高值？

$(document).ready(function(){ 
 
\t var scrolledDefault = $(window).height()/2 - ($('.img__moi').height()/2) + 25; 
 
    \t $('.img__moi').css('top', scrolledDefault); 
 
\t $(window).scroll(function(e){ 
 
    \t \t parallax('.img__moi', '0.2'); 
 
\t }); 
 

 
\t function parallax(element, vitesse){ 
 
\t \t var scrolled = $(window).scrollTop() + ($(window).height()/2) - ($(element).height()/2) + 25; 
 
\t \t console.info(scrolled*vitesse); 
 
\t \t $(element).css('top',-(scrolled*vitesse)+'px'); 
 
\t } 
 
});

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"> 
 
\t \t \t <div class="align__text"> 
 
\t \t \t \t <h1>The title here<br/> Two line</h1> 
 
\t \t \t </div> 
 
</header>

Answer 1

另外，如果你重新排列你的數學一點你有一個建立這或許更容易應用到其他的div，而無需將它們包裝：

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

我找到了解決辦法。

只需添加一個div來包裝標題和圖像的垂直和水平中心的高度。

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