I am looking to achieve a scrolling effect with multiple elements, specifically three pictures in this case.
While it is easy to implement scrolling, my goal is to keep the background fixed during the scroll event and have it move once the scrolling is complete.
HTML:
<div id="infografik">
<div id="innerWrapper">
<div class="minerWrapper">
<img class="miner1" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Girl_Miner.png" alt="girl miner" />
<img class="miner2" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Head_Miner.png" alt="girl miner" />
<img class="miner3" src="<?php bloginfo('template_url'); ?>/images/infografik/00_miners/Boy_Miner.png" alt="girl miner" />
</div>
</div>
</div>
CSS:
#infografik{
font-size:100px;
width:100%;
background:url('../images/infografik/whole_bkgd_2.jpg')center center no-repeat;
height:6200px;
/*position:fixed;*/
}
#innerWrapper{
width:935px;
height:100%;
margin:0 auto;
background-color:red;
opacity:0.3;
}
.minerWrapper{
top:260px;
position:relative;
}
#scrollwrapper{
height:6200px;
position:absolute;
/*overflow:scroll;*/
}
JQuery:
controller.pin($('#infografik'), 700, {
anim: (new TimelineLite())
.append(
TweenMax.fromTo($('img.startGM'), .45,
{css:{width: 22}, immediateRender:true},
{css:{width: 172}})
),
onUnpin: function(){
$('#infografik').css('position', 'relative');
}
}, -2000);
I initially tried setting the background to a fixed position, but it kept jumping back to its original position after the scroll event...
I also attempted to use superscrollorama's pin function on the minerWrapper element, but that resulted in the miners remaining static while the background continued to move. I need everything to move during the scroll event.
Regards, Timmi
I need to h