Question

我正在做一个动画，其中包含文本的div从底部飞入其父div。现在，我试图从中排除h1标记。我将飞行器的div定位到底部并使它不可见。出于逻辑原因，此div也包含标题。

也许我错过了明显的地方，但是有人可以帮助我将标题定位在其“最终位置”，而仅“移动”其余文本（段落标签），因此标题始终是她所属的位置到，其余的从下面飞。

这是我到目前为止所做的：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slide");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 2000);
}

(function($) {
  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

var win = $(window);

var allModifications = $(".half-width-content");

allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    alert();
    el.find(".half-width-text").addClass("open"); 
  } 
});

win.scroll(function(event) {
  
  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open"); 
    } 
  });
  
});

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
}
.container > div {
  min-height: 100vh;
  border:1px solid black;
  box-sizing:border-box;
}
.container > div > a > .dot{
  position: relative;
  transition: background .2s linear;
  left: 50%;
  bottom: 10%;
  z-index: 101;
    height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
}
.container > div > a  > .dot > .arrow-down {
  transition: border .2s linear;
  position: absolute;
  top:11%;
  left: 24%;
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
}
.container > div > a .dot:hover{
  background: black;
}
.container > div > a .dot:hover > .arrow-down{
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
}
.container > div > a > .dot > .arrow-down{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.container > div .content{
  height: 100vh;
  width: 100vw;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

div > .content{
  background: green;
}
.video-iframe.fullsize{
  height: 100%;
  width: 100%;
}

.list{
  list-style: none;
  text-align: center;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
  position: relative;
  height: 100%;
  width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
  position: absolute;
  width: 100%;
  height: 100%;
}

.half-width > .half-width-content > .half-width-text{
  position: absolute;
  left: 50%;
  top: 150%;
  visibility: hidden;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: all 1s linear;
}

.half-width > .half-width-content > .half-width-text.open{
  visibility: visible;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="full-width">
<iframe class="video-iframe fullsize" src="example_video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <a href="#section2">
      <span class="dot">
        <i class="arrow-down"></i>
      </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <div class="half-width-text">
        <h1>Lorem ipsum dolor sit amet</h1>
        <div class="text-content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        um. Stet clita kasd gubergren, no sea takimata sanctus est</p>
        <p>akimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow">
        <img class="slide" src="http://placekitten.com/200/300">
        <img class="slide" src="https://placeimg.com/640/480/animals">
        <img class="slide" src="http://placekitten.com/200/300">
      </div>
    </div>
  </div>
  <div class="half-width">
    div 3
  </div>
  <div class="half-width">
    div 4
  </div>
</div>

Answer 1

您的代码段无效，但是如果您需要固定一个元素并移动其他元素，则很简单absolute positioning。只需确保注意我为帐户中添加的padding添加的额外h1即可。

.half-width-content{position: relative; padding-top: 60px;}
.half-width-content h1{position: absolute; top: 0;}
.half-width-content .text-content{
  -webkit-animation: swing 3s infinite; /* Safari 4+ */
  -moz-animation:    swing 3s infinite; /* Fx 5+ */
  -o-animation:      swing 3s infinite; /* Opera 12+ */
  animation:         swing 3s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes swing {
  0%   { margin-top: 0; }
  50%   { margin-top: 100px; }
  100% { margin-top: 0; }
}

<div class="half-width-content">
  <div class="half-width-text">
    <h1>Lorem ipsum dolor sit amet</h1>
    <div class="text-content">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr um. Stet clita kasd gubergren, no sea takimata sanctus est</p>
      <p>akimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

CSS，除了定位元素

1 个答案: