离页滑动导航
Off-page Sliding Navigation
本文关键字:导航 更新时间:2023-09-26
我试图创建一个简单的页外滑动导航,但我在一些代码上堆叠,主要是CSS。
我正在尝试创建一个3D效果,而不是隐藏和取消隐藏侧边栏菜单的简单幻灯片效果。
以下是我目前的JSFIDDLE作品:http://jsfiddle.net/je9fa6zc/
我想要的是创建一个3D幻灯片,效果如下:http://jsfiddle.net/f9bdm1te/2/
所以我试着从这个JSFIDDLE中复制一些CSS,但我没有得到我想要的。在3D幻灯片上复制一些代码后,请参阅我更新的CSS。
#site-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 5000px; /* Temp: Simulates a tall page. */
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
#site-canvas {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
padding: 5% 0; /* Temp: Just spacing. */
}
#site-menu {
width: 300px;
height: 100%;
position: absolute;
top: 0;
left: -300px;
background: #428bca;
padding: 15px;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#site-wrapper.show-nav #site-canvas {
-webkit-transform: translateX(300px);
transform: translateX(300px);
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
你介意检查一下我哪里出错了吗?
如果你也可以更新我的JSFIDDLE,让我可以看到它?
我为您的JSFiddle添加了一些CSS。
/* transition the menu with perspective on "show-nav" */
#site-wrapper.show-nav #site-menu {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
}
默认情况下,菜单向内旋转90度,当应用show nav类时,在滑动div和菜单本身上都会进行转换。这样,菜单可以通过透视旋转到其原始的0度。
看看它,看看它是否是你想要的。
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 带有url的单页网站导航
- 父页面的角度路由器导航高亮显示
- 如何正确编程jQuery动画与平滑(导航栏)
- 动态更改'汉堡包'导航取决于BG图像
- 使用导航属性创建Kendo UI网格模型的问题
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 离开页面导航后保留文本区域内容
- 当主导航离开视图时,为粘性导航应用样式
- 删除移动视图粘性js上的粘性导航栏