基于html5页面滚动背景图片动画效果

基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<div id="fullpage">
        <div class="first section">
            <div class="container">
                <div class="phonesblock">
                    <div class="phones">
                        <img src="img/phone1.png" alt="" class="phone1" />
                        <img src="img/phone2.png" alt="" class="phone2" />
                    </div>
                </div>

                <div class="downblock">

                    <div class="downwrap">
                        <img src="img/down2.png" alt="" class="down" />
                    </div>
                </div>
                <div class="star">
                    <div class="vline"></div>
                    <img src="img/star2.png" alt="" />
                </div>
                <div class="androiddown"></div>

            </div>
        </div>
        <div class="second section">
            <div class="container">
                <div class="hablock">
                    <div class="starmoon">
                        <img src="img/star-moon.png" alt="" />
                    </div>
                    <div class="help">
                        <img id="help" src="img/help.png" alt="" />
                        <div class="pop4">
                            <img src="img/pop2.png" alt="" />
                            <img src="img/popcontent4.png" alt="" />
                        </div>
                    </div>
                    <div class="answer">
                        <div class="answers">
                            <div class="pop1">
                                <img src="img/pop2.png" alt="" />
                                <img src="img/popcontent1.png" alt="" />
                            </div>
                            <div class="pop2">
                                <img src="img/pop2.png" alt="" />
                                <img src="img/popcontent2.png" alt="" />

                            </div>
                            <div class="pop3">
                                <img src="img/pop2.png" alt="" />
                                <img src="img/popcontent3.png" alt="" />
                            </div>
                        </div>
                        <div class="pillows">
                            <img src="img/pillows.png" />
                        </div>

                    </div>
                </div>
                <div class="yewenblock">
                    <div class="yewen">
                        <div class="title">夜问？</div>
                        <div class="content">
                            <p>
                                你的一个问题，<br />
                                成就了这么多的大湿！<br />
                                无论是情感困惑    <br />
                                还是十万个为什么，<br />
                                这里都有人回应你！<br />
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ball">
                    <div class="vline"></div>
                    <img src="img/ball.png" />
                </div>
            </div>
        </div>
        <div class="third section">
            <div class="container">
                <div class="goodnight">
                    <div class="hearttalk">
                        <img class="talk" src="img/hearttalk.png" />
                        <img class="gn" src="img/goodnight.png" alt="" />
                    </div>

                </div>
                <div class="yehuablock">
                    <div class="yehua">
                        <div class="title">夜话  </div>
                        <div class="content">
                            <p>
                                你的一句情话，<br />
                                不知戳到了多少人的心！<br />
                                说情话喝鸡汤聊八卦，<br />
                                谁让练习的妹子太单纯！<br />
                            </p>
                        </div>
                    </div>
                </div>
                <div class="smile">
                    <div class="vline"></div>
                    <img src="img/smile-on-2.png" />
                </div>
            </div>
        </div>
        <div class="fourth section">
            <div class="container">
                <div class="connblock">
                    <div class="connection">
                        <div class="bg1"><img src="img/connbg1.png" alt="" /></div>
                        <div class="bg2"><img src="img/connbg2.png" alt="" /></div>
                        <div class="connwrap">
                            <div class="f2b">
                                <img src="img/f2.png" alt="" class="f2" />
                            </div>
                            <div class="f3b">
                                <div class="f3wrap">
                                    <img src="img/f3.png" alt="" class="f3" />
                                </div>
                            </div>
                            <div class="f1b">
                                <img src="img/f1.png" alt="" class="f1" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fujinblock">
                    <div class="fujin">
                        <div class="title">附近</div>
                        <div class="content">
                            <p>
                                我靠，<br />
                                原来我的邻居也这么寂寞！<br />
                                发现附近未知的声音，<br />
                                你离Ta只差一个练习！<br />
                            </p>
                        </div>
                    </div>
                    <div class="loc">
                        <div class="vline"></div>
                        <img src="img/loc.png" alt="" />
                    </div>
                </div>

            </div>
        </div>
        <div class="fifth section">
            <div class="aboveblock">
                <div class="above"></div>
                <div class="center">
                    <div class="housewrap">
                        <img src="img/house.png" alt="" class="house" />
                        <div class="cloud">
                            <img src="img/cloud2.png" alt="" />
                        </div>
                        <div class="lunar">
                            <img src="img/lunar.png" alt="" />
                        </div>
                    </div>
                </div>

            </div>

            <div class="footer">
                <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
            </div>

        </div>

    </div>

via：http://***/article/55058