Wie fixiere ich ein Element in der Mitte eines Viewports in Bezug auf das Containerelement?

Betrachten Sie zwei Containerelemente nebeneinander, beide sind länger als die Breite des Ansichtsfensters und das Ansichtsfenster kann horizontal gescrollt werden. Beide enthalten ein Element im Inneren, das ich in der Mitte des sichtbaren Teils des enthaltenden Div halten möchte. Hier ist der Auszeichnungs:Wie fixiere ich ein Element in der Mitte eines Viewports in Bezug auf das Containerelement?

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

und hier ist die CSS:

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

Ich bin sehr traurig, dass ich finde es sehr schwer zu beschreiben, was ich brauche, da Englisch nicht meine Muttersprache ist, aber ich mochte zu beschreiben, es mit einem Bild und eine Animation:

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

Quelle

2016-04-26 user3356048

Willkommen bei SO. Dein Englisch ist sehr gut, aber du musst deinen Versuch (Markup) zeigen. Bitte lesen Sie die Hilfeseiten. – isherwood

Haben Sie irgendeinen Code ausprobiert? –

es ist schwierig zu verstehen, was Sie wollen genau eine horizontale Animation oder Bildlauf? –

Hier ist, was Sie wollen.

Geschenk: Check-out die schönere 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>

Quelle

2016-04-27 01:48:27

Das Konzept, das Sie beschreiben, heißt Parallaxe und kann ein wenig involviert sein, um genau das Richtige zu erreichen. Hier ist ein Beispiel: http://stephband.info/jparallax/

Haben Sie schon irgendwelche Lösungen ausprobiert?

Quelle

2016-04-26 21:36:02 johnniebenson

Ich bin mit Parallaxe vertraut, leider löst es nicht mein Problem :( – user3356048

Ich habe eine einfache Version mit JavaScript erstellt. Ich weiß nicht, ob es in jedem Browser funktioniert. Ich weiß sicher, dass es auf Safari und Firefox funktioniert. Es ist sehr lückig, aber es ist möglich, das zu beheben.

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>

Quelle

2016-04-26 22:15:36 user3722860

Wie fixiere ich ein Element in der Mitte eines Viewports in Bezug auf das Containerelement?

Antwort

Verwandte Themen