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