中央の視差画像

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>