skrollr.menu实现全屏滚动层叠幻灯片效果代码-html代码-BFW代码库

skrollr.menu实现全屏滚动层叠幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：skrollr.menu实现全屏滚动层叠幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        html, body {
          width:100%;
          height:100%;
          padding:0;
          margin:0;
          overflow-x:hidden;
        }
        
        .skrollable {
          /*
           * First-level skrollables are positioned relative to window
           */
          position:fixed;
        
          /*
           * Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
           */
          z-index:100;
        }
        
        .skrollr-mobile .skrollable {
          /*
            May cause issues on Android default browser (see #331 on GitHub).
          */
          position:absolute;
        }
        
        .skrollable .skrollable {
          /*
           * Second-level skrollables are positioned relative their parent skrollable
           */
          position:absolute;
        }
        
        .skrollable .skrollable .skrollable {
          /*
           * Third-level (and below) skrollables are positioned static
           */
          position:static;
        }
        
        
        
        /* Skrollr data position info */
        #info {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: rgba(0,0,0,0.5);
          color: #fff;
          padding: 20px;
          z-index: 9999999;
        }
        
        
        /* CSS General */
        body{
          background:#333;
        }
        section{
          position:fixed;
          width:100%;
          height:100%;
          box-shadow: 0 -19px 38px rgba(0,0,0,0.10);
        	display:table;
        	text-align:center;
        	vertical-align:middle;
        }
        
        section h1{
        	top:50%;
        	transform:translateY(-50%);
        	color:#fff;
        	position:absolute;
        	width:100%;
        	text-align:center;
        	font-family:'lato';
        	font-weight:400;
        }
        
        #section1{
          background:#c0392b;
          z-index:1;
        }
        
        #section2{
          background:#2980b9;
          z-index:2;
        }
        
        #section3{
          background:#8e44ad;
          z-index:3;
        }
        
        #section4{
          background:#f39c12;
          z-index:4;
        }
        
        #section5{
          background:#34495e;
          z-index:5;
        }
        /* Skrollr Menu Buttons */
        ul.menu{
        	position:fixed;
        	width:40px;
        	height:100px;
        	right:40px;
        	top:50%;
        	z-index:100;
        	list-style:none;
        	transform:translateY(-50%);
        }
        ul.menu li{
        	width:100%;
       .........完整代码请登录后点击上方下载按钮下载查看