那些遇到过的问题

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

Sup*_*own 7 html javascript css animation parallax

嗨,我目前正在建立一个视差网站.我想添加一个在用户滚动时向下移动的图像......但仅限于网站的某个部分.所以4个部分向下......图像在那里......它随着用户向下滚动而移动......然后消失在第5个部分后面,我们不再看到它.

我正试图对这个网站做类似的效果: 网站

当你向下滚动时...你看到"关于"在div之间移动.我想实现这一目标.

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

这是一个JSfiddle示例.它只显示了网站的一部分:小提琴

我知道这与定位有关.但我希望它保持在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)
Run Code Online (Sandbox Code Playgroud) 
.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;
}*/
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

小智 3

首先，我们必须计算每个部分的相对滚动位置。我们通过计算窗口底部距部分顶部的距离来做到这一点。当该部分出现在窗口底部时，它从 0 开始；当该部分顶部行进 (WINDOW_HEIGHT + SECTION_HEIGHT) 个像素时，它从 1 结束。此时该部分在窗口中不再可见。

就是这样。然后，我们通过设置气泡的 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);
Run Code Online (Sandbox Code Playgroud)

超文本标记语言

<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>
Run Code Online (Sandbox Code Playgroud)

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;
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

216 次

最近记录：

10 年，2 月 前
相关归档
如何在元素的一侧添加框阴影？ 425
使用Underscore for Javascript删除重复的对象 122
将HTML标记转义为HTML实体的最快方法？ 93
如何在textarea中获得光标位置？ 61
谷歌地图API v3~简单关闭infowindow？ 59
将文本基线与CSS中的按钮对齐 50
删除HTML滚动条但允许鼠标滚轮滚动 43
检查JS中的FPS？ 35
Bootstrap 3 hidden-xs使行更窄 33
是否可以在xHTML strict 1.0中使用CSS渲染空<div style ="width:50%"> </ div>而无需设置宽度和高度(以像素为单位)？ 22
难疑归档
如何将Git存储库还原为以前的提交 7278
如何从JavaScript对象中删除属性？ 5813
如何正确克隆JavaScript对象？ 2922
使用'for'循环迭代字典 2901
如何异步上传文件？ 2841
获取屏幕大小,当前网页和浏览器窗口 1927
Git push需要用户名和密码 1327
如何查看仅一个用户提交的git日志？ 1178
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081
自定义HTTP标头:命名约定 1051