Menu
Hi I'm currently working on a parallax website. I would like to add an image that moves down as the user scrolls...but ONLY within a section of a website. So 4 sections down..the image is there...it moves as the user scrolls down...then disappears behind 5th section and we see it no more.
I'm trying to do a similar effect to this website: Website
When you scroll down...you see "ABOUT" move between divs. I want to achieve that.
When I do it...it appears on top of first section and stays on screen all the way down.
Here's a sample JSfiddle. It only shows a part of the website: fiddle
I know it's to do with positioning. But I want it to stay within the DIV rather than positioned within 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>
729
First we have to compute relative scroll position for every section. We do that by computing how far is window bottom from the section top. It starts at 0 when the section appears at the bottom of the window and ends at 1 when the section top traveled (WINDOW_HEIGHT + SECTION_HEIGHT) pixels. At this point the section is no longer visible in the window.
That's it. We then use the section relative scroll position to move bubbles by setting their css top positions.
We can play with it more and introduce options which allow us to set when bubble appears and disappears in terms of section relative scroll position. So for example we want a bubble to appear when a section is 0.5 scrolled and disappear when the section is 0.8 scrolled. We do this by manipulating length of a path (and top offset) that the bubble has to travel.
See this JsFiddle for details: http://jsfiddle.net/jkk7t7Lk/10/ (note: this example uses jQuery)
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);
<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>
.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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
