How to have a div scroll FASTER than the rest of the html on mouse scroll down?

Question

I am trying to create a sort of parallax effect, I what the section after "ABOUT" containing two different div with image to scroll faster than the rest of the page. I want that whole div to scroll faster so that it looks like the first drawn picture is being wiped up but the similar picture.

Test site: http://www.onepixelroom.com/AQUODI/ (the section just after "ABOUT")

Example, scroll down (a lot, yes, it's annoying :) this site to see the footballer guys change color, I want to do this with both my images: http://www.tridentpp.com/

HTML:

<div id="quote-selector-div">
<div id="quote-images">
<div class="quote-selector-div-img"></div><div class="quote-selector-div-blue"></div>
</div>
</div>

CSS:

#quote-selector-div {
    height: 800px;
    position:relative;
    overflow:hidden;
}
#quote-images {
    height: 800px;
    position:relative;
}
.quote-selector-div-img{
    height: 400px;
    background: url(../img/living-room-blue.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow:hidden;
    position:relative;
}
.quote-selector-div-blue {
    background: url(../img/living-room.jpg) no-repeat center center fixed;
    height: 400px;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
}

the page is using parallax.js, but it only works on background picture, I would like that same effect on a whole div, or a better solution.

No worries. Sorry I can't help with your question! – Bill Feb 08 '14 at 18:35 — Bill, Feb 08 '14 at 18:35
At least I wont look stupid with my full ham :) – Feb 08 '14 at 18:37 — , Feb 08 '14 at 18:37

score 0 · Answer 1 · answered Feb 08 '14 at 18:37

0

You can use this jQuery plugin that might help you: https://github.com/davecranwell/jQuery-scroll-parallax

answered Feb 08 '14 at 18:37

Pierre

1,553
12
22

My page is already doing the same thing as the plugin. I would need the part that is in between the two white text sections to scroll up faster than the rest so that by the time I get to the bottom only the colored picture is shown, if that makes sense. – Feb 08 '14 at 18:45
As in, have that div 150% higher in height , and have some sort of JS that could speed up the scroll, and have it hidden under the white sections above and below. – Feb 08 '14 at 18:47

ElDoRado1239 · Answer 2 · 2014-02-08T19:07:14.673

0

EDIT

Try this. You can use the setScrollSpeed() to assign specific scroll speeds to elements. The speed is the multiplier for the normal scroll speed.

var boostedElements = [];
function setScrollSpeed(element,speed){
 boostedElements.push({element:element,lastpos:element.scrollTop,boost:speed});
 element.onscroll = boostedScroll;
}
function boostedScroll(){
 var boosted;
 for(var i in boostedElements) if(boostedElements[i].element == this){
  boosted = boostedElements[i];
  break;
 }
 if(boosted == undefined) return;
 var distance = boosted.element.scrollTop - boosted.lastpos;
 boosted.element.scrollTop = boosted.lastpos + (distance * boosted.boost);
 boosted.lastpos = boosted.element.scrollTop;
}

edited Feb 08 '14 at 19:07

answered Feb 08 '14 at 18:50

ElDoRado1239

3,938
2
16
13

Thanks for the reply. So I did that but it doesn't seem to work, although if I refresh the page on that div and scroll a bit it scrolls faster one scroll then falls back and aligns to the rest. Maybe I have a conflict, deleting all the JS doesnt do a difference – Feb 08 '14 at 19:09
Thanks for the help, can't find a solution, but have seen it plenty around. Oh well will resort to a scripted way instead :( http://www.onepixelroom.com/AQUODI/ – Feb 08 '14 at 19:26

How to have a div scroll FASTER than the rest of the html on mouse scroll down?

2 Answers2