特效描述:html5 全屏页面 视差滚动 网站特效。html5视差滚动,页面视差滚动,全屏视差滚动
代码结构
1. 引入CSS
<link rel="stylesheet" href=" css/style.css">
2. 引入JS
<script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/libs/jquery.min.js"></script> <script defer="" src="js/libs/jquery-ui-1.8.13.custom.min.js"></script> <script defer="" src="js/libs/jquery.scrollTo-1.4.2-min.js"></script> <script defer="" src="js/libs/jquery.animate-enhanced.min.js"></script> <script defer="" src="js/libs/iscroll-min.js"></script> <script defer="" src="js/libs/ga.js"></script> <script defer="" src="js/plugins.js"></script> <script defer="" src="js/voeux.js"></script>
3. HTML代码
<div id="share"> <div class="white"> <a class="fb" href="https://www.facebook.com/sharer.php?u=http://www.soleilnoir.net/believein/" target="_blank"></a> <img class="line" src="img/nav/line_blanc.png"> <a class="tt" href="https://twitter.com/intent/tweet?text=http://www.soleilnoir.net/believein/" target="_blank"></a> </div> <div class="black"> <a class="fb" href="https://www.facebook.com/sharer.php?u=http://www.soleilnoir.net/believein/" target="_blank"></a> <img class="line" src="img/nav/line_noir.png"> <a class="tt" href="https://twitter.com/intent/tweet?text=http://www.soleilnoir.net/believein/" target="_blank"></a> </div> </div> <div id="scrollContainer"> <div id="scroller"> </div> </div> <div id="loader"> <img src="img/nav/loader.gif"> </div> <div id="turnYourPhone"></div> <div id="container"> <header> </header> <div id="main" role="main"> <ul class="bg"> <li id="start" style="background-color: #f3efe8;" class="noCache black"> <a id="go" href="javascript:;"></a> </li> <li id="entertainment" style="background-color: #f47723;"></li> <li id="fashion" style="background-color: #66cac9;" class="size2"></li> <li id="aliens" style="background-color: #4e4a9d;"></li> <li id="soleilnoir" style="background-color: #efeae1;" class="black"></li> <li id="iOS" style="background-color: #308694;"></li> <li id="ideas" style="background-color: #36b1c5;"></li> <li id="health" style="background-color: #fdbd17;" class="black"></li> <li id="flash" style="background-color: #e84613;"></li> <li id="work" style="background-color: #a86839;"></li> <li id="yourself" style="background-color: #a5c26e;"></li> <li id="thefuture" style="background-color: #ffe101;" class="black"></li> <li id="isnotmylover" style="background-color: #021e2f;"></li> <li id="passion" style="background-color: #1d3d1d;"></li> <li id="youtube" style="background-color: #f90f49;"></li> <li id="typo" style="background-color: #22a0df;"></li> <li id="love" style="background-color: #c74565;"></li> <li id="end" style="background-color: #f3efe8;" class="noCache black"> <a id="restart" href="javascript:;"></a> </li> </ul> <div id="nav"> <div id="arrow"></div> <div id="dots"> <ul></ul> </div> </div> </div> <footer> </footer> </div>