0

いくつかの要素からスクロールする必要があります。その場合はこちらの3枚の写真から。

それは問題ありませんが、私が達成しようとしているのは、スクロールイベント中にbgが同じままで（多かれ少なかれ固定されている）、スクロールイベントが終了した後に背景が移動することです。

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

私はbgに最初の固定位置を与えようとしましたが、スクロールイベントの後、彼はジャンプして開始します...

また、minerWrapper に superscrollorama ピン機能を使用して固定位置を与えようとしましたが、イベント中にマイナーが静止するだけで、背景が移動します。

こんにちはティミ

私はする必要があります

4

2 に答える 2

0

ページの読み込み時に自動的に下にスクロールすることで修正できます。

これはスクリプトです：

function Scrolldown() {
     window.scroll(0,1); 
}

リンクの例:

http://codepen.io/subin/pen/dprkkY

あなたの提案を教えてください。

于 2016-09-15T05:04:31.147 に答える