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

代码语言:html

所属分类:幻灯片

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

代码标签: skroll 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;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0