How to limit an animated div to a section of a webpage?

Question

Hi, I am currently working on the parallax website. I would like to add an image that moves down as the user scrolls ... but ONLY within the section of the website. So, 4 sections down ... the image is ... it moves when the user scrolls down ... then disappears behind the 5th section, and we no longer see this.

I am trying to make a similar effect for this site: Website

When you scroll down, you see an “O” movement between the divs. I want to achieve this.

When I do this, it appears on top of the first section and remains on the screen until the end.

Here is a JSfiddle example. It shows only part of the website: fiddle

I know this is related to positioning. But I want it to stay inside the DIV, and not fit on the whole page.

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

First we need to calculate the relative scroll position for each section. We do this by calculating how far the bottom of the window is from the top of the section. It starts at 0 when the section appears at the bottom of the window and ends at 1 when the top of the section moves (WINDOW_HEIGHT + SECTION_HEIGHT). At this point, the section no longer appears in the window.

What is it. Then we use the relative scroll position of the section to move the bubbles, setting the top css positions.

We can play with it more and introduce options that allow us to set when the bubble appears and disappears in terms of the relative scroll position. So, for example, we want the bubble to appear when the 0.5 section scrolls and disappears when the 0.8 section scrolls. We do this by manipulating the length of the path (and the upper displacement) with which the bubble should move.

See this JsFiddle for more details: http://jsfiddle.net/jkk7t7Lk/10/ (note: jQuery is used in this example)

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