如何将动画 div 限制在网页部分？

Question

您好，我目前正在开发一个视差网站。我想添加一个随着用户滚动而向下移动的图像......但只在网站的一部分内。所以向下 4 个部分..图像在那里...它随着用户向下滚动而移动...然后消失在第 5 个部分后面，我们再也看不到它了。

我正在尝试对这个网站做类似的效果：Website

向下滚动时...您会看到 "ABOUT" 在 div 之间移动。我想实现这一目标。

当我这样做时...它出现在第一部分的顶部并一直停留在屏幕上。

这是一个示例 JSfiddle。它只显示网站的一部分：fiddle

我知道这与定位有关。但我希望它留在 DIV 内，而不是位于整个页面内。

// Create cross browser requestAnimationFrame method:
window.requestAnimationFrame = window.requestAnimationFrame
                               || window.mozRequestAnimationFrame
                               || window.webkitRequestAnimationFrame
                               || window.msRequestAnimationFrame
                               || function(f){setTimeout(f, 1000/60)}

var bubble1 = document.getElementById('bubbles1')
var bubble2 = document.getElementById('bubbles2')
var fish = document.getElementById('fish')

var scrollheight =  document.body.scrollHeight // height of entire document
var windowheight = window.innerHeight // height of browser window


function parallaxbubbles(){
 var scrolltop = window.pageYOffset // get number of pixels document has scrolled vertically
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 bubble1.style.top = scrolltop * .2 + 'px' // move bubble1 at 20% of scroll speed
 bubble2.style.top = -scrolltop * .5 + 'px' // move bubble2 at 50% of scroll speed
 fish.style.left = -100 + scrollamount + '%'

}

window.addEventListener('scroll', function(){ // on page scroll
 requestAnimationFrame(parallaxbubbles) // call parallaxbubbles() on next available screen repaint
}, false)

window.addEventListener('resize', function(){ // on window resize
 var scrollamount = (scrolltop / (scrollheight-windowheight)) * 100 // get amount scrolled (in %)
 fish.style.left = -100 + scrollamount + '%'
}, false)

.cd-main-content {
  /* I need to assign a min-height to the main content so that the children can inherit it*/
  height: 60%;
  position: relative;
  /*z-index: 1;*/
}

.cd-fixed-bg {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../images/content/grey.png");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../images/content/cd-background-2.jpg");
}

@media only screen and (min-width: 768px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}

.cd-scrolling-bg {
  position: relative;
  min-height: 50%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
/*.cd-scrolling-bg.cd-color-1 {
  background-color: #ffffff;
  color: #000000;
}*/
.cd-scrolling-bg.cd-color-2 {
  background-color: #1c1c1c;
  
  background: rgba(48,48,48,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(48,48,48,1)), color-stop(0%, rgba(56,56,56,1)), color-stop(46%, rgba(28,28,28,1)), color-stop(100%, rgba(10,10,10,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
background: radial-gradient(ellipse at center, rgba(48,48,48,1) 0%, rgba(56,56,56,1) 0%, rgba(28,28,28,1) 46%, rgba(10,10,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#0a0a0a', GradientType=1 );
  
  
  
 
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #00161B;
  color: #3d3536;
}
@media only screen and (min-width: 768px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}





#bubbles1{
width: 100%;
height: 100%;
bottom: 0;
left: 0;
position: absolute;
z-index: -1;
background: url(http://www.i2clipart.com/cliparts/9/2/6/b/clipart-bubble-926b.png) 5% 80% no-repeat;
}

/*
#bubbles2{
background: url(bubbles3.png) 95% 90% no-repeat;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<main class="cd-main-content parallax">
 

  <div class="cd-scrolling-bg cd-color-2 parallax">
   <div class="cd-container">
    <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem. Voluptates quibusdam odit odio incidunt consequatur, consectetur aspernatur optio vitae molestias, quas repellendus fugit ullam culpa, eligendi et dignissimos voluptatibus illum? Molestias aliquam nostrum quasi ipsa culpa, iusto explicabo ut error, consequuntur enim temporibus, adipisci tempora voluptate, id consequatur mollitia eveniet blanditiis. Illo quod repellendus alias? Cum rem doloremque adipisci accusantium? Saepe, necessitatibus!
    </p>
   </div> <!-- cd-container -->
  </div> <!-- cd-scrolling-bg -->

  <div class="cd-scrolling-bg cd-color-3">
             <div id="bubbles1"></div>
   <h2>Lorem ipsum dolor sit amet.</h2>
  </div> <!-- cd-fixed-bg -->

  <div class="cd-scrolling-bg cd-color-3">
   
      <div class="container">
                         <!--this is the bubble image-->
                        
     
        <div class="row-fluid">
            <div class="span3">
                <div class="text-widget widget">
                    <h4>About Me</h4>
                    <p>Lorem ipsum dolor nonus amet, consectetur ex adipisicing elit, sed do eiusmod incididunt ut labore et
                        dolore magna aliqua. Ut enim ad ex minim veniam, quis nostrud lorem exercitation ullamco laboris
                        nisi ut aliquip nesciunt aliqua.</p>
      
      
                </div>
            </div>
   
 
            <div class="span3">
               
            </div>
            <div class="span3">
                
            </div>
            <div class="span3">
               
            </div>
   
  
        </div>
  
  
    </div>
     
 
  </div>

Answer 1

首先我们必须计算每个部分的相对滚动位置。我们通过计算 window 底部距顶部的距离来做到这一点。当该部分出现在 window 的底部时它从 0 开始，当该部分顶部行进（WINDOW_HEIGHT + SECTION_HEIGHT）像素时它以 1 结束。此时该部分在 window.

中不再可见

就是这样。然后，我们使用部分相对滚动位置通过设置 css 顶部位置来移动气泡。

我们可以更多地使用它并引入选项，这些选项允许我们根据部分相对滚动位置设置气泡出现和消失的时间。因此，例如，我们希望当一个部分滚动 0.5 时出现气泡，并在该部分滚动 0.8 时消失。我们通过操纵气泡必须经过的路径长度（和顶部偏移量）来做到这一点。

有关详细信息，请参阅此 JsFiddle：http://jsfiddle.net/jkk7t7Lk/10/（注意：此示例使用 jQuery）

Javascript

function moveBubbles() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var scrollBottom = scrollTop + windowHeight;

    $('.section').each(function() {
        var sectionHeight = $(this).outerHeight(true);

        var sectionTop = $(this).position().top;
        var sectionBottom = sectionTop + sectionHeight;

        var in_window = (sectionTop >= scrollTop && sectionTop <= scrollBottom) 
                        || (sectionBottom >= scrollTop && sectionBottom <= scrollBottom) 
                        || (sectionTop <= scrollTop && sectionBottom >= scrollBottom);

        if (in_window)
        {                
            var pathHeight = sectionHeight + windowHeight;
            var position = (scrollBottom - sectionTop) / pathHeight; // <0, 1>

            $(this).find('.bubble').each(function() {
                var bubbleHeight = $(this).outerHeight(true);
                var start = parseFloat($(this).data('start'));                
                var speed = 1 / (parseFloat($(this).data('end')) - start);                
                var bubble_path = (sectionHeight + bubbleHeight) * speed;                
                var offset_top =  start * bubble_path;

                var top = bubble_path * position - bubbleHeight - offset_top;

                $(this).css('top', top);
            });
        }
    });
}

$(document).ready(moveBubbles);
$(window).resize(moveBubbles);
$(window).scroll(moveBubbles);

HTML

<div class="section">
        <span class="bubble" style="left: 50px;" data-start="0.5" data-end="0.75"></span>
    Section 1
</div>
<div class="section">
    <span class="bubble" style="left: 30px;" data-start="0.3" data-end="0.6"></span>
    <span class="bubble" style="left: 100px;" data-start="0.4" data-end="1"></span>
    <span class="bubble" style="left: 200px;" data-start="0" data-end="1"></span>
    <span class="bubble" style="left: 300px;" data-start="0.2" data-end="0.55"></span>
    Section 2
</div>
<div class="section">
            <span class="bubble" style="left: 50px;" data-start="0.7" data-end="0.71"></span>
    Section 3
</div>
<div class="section">
    Section 4
</div>

CSS

.section {
    height: 100vh;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
}

.bubble {
    background-image: url(http://www.i2clipart.com/cliparts/9/2/6/b/clipart-bubble-926b.png);
    width: 128px;
    height: 128px;
    position: absolute;
    display: block;
}

如何将动画 div 限制在网页部分？

how to confine animated div to a webpage section?

javascript

html

css

animation

parallax

Javascript

HTML

CSS