コンテナ要素に関するビューポートの中心に要素を固定するにはどうすればよいですか？

2つのコンテナ要素を並べて考えると、両方ともビューポートの幅より長く、ビューポートは水平方向にスクロール可能です。どちらも、私が含んでいるdivの目に見える部分の中央に保持したい要素が内部に含まれています。ここでマークアップは次のとおりです。コンテナ要素に関するビューポートの中心に要素を固定するにはどうすればよいですか？

<body> 
    <div class="wrapper"> 
     <div class="container" id="container1"> 
      <div class="element" id="element1"></div> 
     </div> 
     <div class="container" id="container2"> 
      <div class="element" id="element2"></div> 
     </div> 
    </div> 
</body>

、ここでは、CSSです：

body { 
    overflow-x: auto; 
} 
.wrapper { 
    width: 400%; 
} 
.container { 
    width: 50%; 
    border: 1px solid #ccc; 
    height: 50px; 
    float: left; 
}

私は英語が母国語ではないので、それは非常に難しい、私は必要なものを記述するために見つけることは非常に申し訳ありませんが、私は希望します画像やアニメーションでそれを説明する：

[ The effect I want to achieve in steps 2 [] 1

出典

2016-04-26 user3356048

SOへようこそ。あなたの英語はとても良いですが、あなたの試み（マークアップ）を示す必要があります。ヘルプページを参照してください。 – isherwood

コードを試しましたか？ –

あなたが正確に何を望んでいるかを理解することが難しい水平のアニメーションまたはスクロール？ –

何をしたいです。

ギフト：チェックアウトmeoww versionきれい。

$(".parallax").on("scroll", function() { 
 
    var scrollValue = $(this).scrollLeft(); 
 
    var parallaxWidth = $(this).width(); 
 

 
    $(".box").each(function() { 
 
     var container = $(this).parent(); 
 
     var containerWidth = $(container).width(); 
 
     var isLeftBox = $(container).is("#left"); 
 
     var ratioParallax = parallaxWidth/containerWidth; 
 
     var ratioScroll = scrollValue/containerWidth; 
 

 
     var move = 50*ratioParallax; 
 

 
     if (isLeftBox) { 
 
      move += ratioScroll*100; 
 

 
      if (ratioScroll > 1/3) 
 
       move -= (ratioScroll-1/3)*50; 
 
     } else { 
 
      move += (ratioScroll-1)*100; 
 

 
      if (ratioScroll < 1) 
 
       move -= (ratioScroll-1)*50; 
 
     } 
 

 
     $(this).css("left", move+"%"); 
 
    }); 
 
}); 
 

 
$(".parallax").trigger("scroll");

div.parallax { 
 
    height:200px; 
 
    width:400px; 
 
    overflow-x:scroll; 
 
    overflow-y:visible; 
 
} 
 
div.parent-container { 
 
    height:100%; 
 
    width:300%; 
 
} 
 
div.container { 
 
    width:50%; 
 
    height:100%; 
 
    float:left; 
 
    overflow:hidden; 
 
} 
 
body div.container#left { 
 
    background-color:red; 
 
} 
 
body div.container#right { 
 
    background-color:blue; 
 
} 
 
div.box { 
 
    height:50px; 
 
    width:50px; 
 
    margin-top:-25px; 
 
    margin-left:-25px; 
 
    background-color:yellow; 
 
    position:relative; 
 
    top:50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parallax"> 
 
    <div class="parent-container"> 
 
     <div id="left" class="container"> 
 
      <div class="box"></div> 
 
     </div> 
 
     <div id="right" class="container"> 
 
      <div class="box"></div> 
 
     </div> 
 
    </div> 
 
</div>

出典

2016-04-27 01:48:27

あなたが描いているコンセプトは視差と呼ばれ、ちょうど正しいことを達成するにはちょっとしたことがあります。ここに例があります：http://stephband.info/jparallax/

解決策はまだ試しましたか？

出典

2016-04-26 21:36:02 johnniebenson

私は視差に慣れています、残念ながらそれは私の問題を解決していません:( – user3356048

JavaScriptを使用して簡単なバージョンを作成しました。すべてのブラウザで動作するかどうかはわかりません。私はそれがSafariとFirefoxで動作することを確かに知っています。非常に遅いですが、それを修正することは可能です。ここで

var pageWidth; 
 
var marginLeft1; 
 
var marginLeft2 = margin; 
 
var box1 = document.getElementById('box11'); 
 
var box2 = document.getElementById('box22'); 
 
var boxWidth = 200; 
 
var largeBoxWidth = 2459; 
 
var margin = 50; 
 

 
function scrollY(Yscroll) { 
 
\t pageWidth = window.innerWidth; 
 
\t 
 
\t if(Yscroll + pageWidth < largeBoxWidth) { 
 
\t \t marginLeft1 = (pageWidth - boxWidth)/2 + Yscroll; 
 
\t } else if(largeBoxWidth - Yscroll > 2*margin + boxWidth) { 
 
\t \t marginLeft1 = (pageWidth - (Yscroll + pageWidth - largeBoxWidth))/2 + Yscroll - 0.5 * boxWidth; 
 
\t } 
 
\t 
 
\t if(Yscroll + pageWidth - largeBoxWidth < 2*margin + boxWidth) { 
 
\t \t marginLeft2 = margin; 
 
\t } else if(Yscroll + pageWidth <= largeBoxWidth) { 
 
\t \t marginLeft2 = (Yscroll + pageWidth - largeBoxWidth)/2 - 0.5 * boxWidth; 
 
\t } else if(2*largeBoxWidth - Yscroll > pageWidth) { 
 
\t \t marginLeft2 = (Yscroll - largeBoxWidth) + 0.5*pageWidth - 0.5 * boxWidth; 
 
\t } else if(2*largeBoxWidth - Yscroll > 2*margin + boxWidth) { 
 
\t \t marginLeft2 = (Yscroll - largeBoxWidth) + (2*largeBoxWidth - Yscroll)/2 - 0.5 * boxWidth; 
 
\t } 
 
\t 
 
\t 
 
\t if(Yscroll + pageWidth - largeBoxWidth > 2*margin + boxWidth && Yscroll - largeBoxWidth < 0) { 
 
\t \t marginLeft2 = (Yscroll + pageWidth - largeBoxWidth)/2 - 0.5*boxWidth; 
 
\t } 
 
\t 
 
\t box2.style.marginLeft = marginLeft2 + 'px'; 
 
\t box1.style.marginLeft = marginLeft1 + 'px'; 
 
} 
 

 
scrollY(document.body.scrollLeft);

body { 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
#wrap { 
 
\t height:200px; 
 
\t width:6148px; 
 
} 
 

 
#box1 { 
 
\t width:40%; 
 
\t height:100px; 
 
\t background-color:#FFDDDD; 
 
\t padding:50px 0; 
 
\t display:inline-block; 
 
} 
 

 
#box11 { 
 
\t width:200px; 
 
\t height:100px; 
 
\t background-color:#FF0000; 
 
} 
 

 

 
#box2 { 
 
\t width:40%; 
 
\t height:100px; 
 
\t background-color:#DDFFDD; 
 
\t padding:50px 0; 
 
\t display:inline-block; 
 
\t margin-left:-4px; 
 
} 
 

 
#box22 { 
 
\t width:200px; 
 
\t height:100px; 
 
\t background-color:#00FF00; 
 
}

<body onscroll='scrollY(document.body.scrollLeft)'> 
 
    <div id='wrap'> 
 
    <div id='box1'> 
 
     <div id='box11'></div> \t \t \t 
 
    </div> 
 
\t \t 
 
    <div id='box2'> 
 
     <div id='box22'></div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-04-26 22:15:36 user3722860

コンテナ要素に関するビューポートの中心に要素を固定するにはどうすればよいですか？

答えて

関連する問題