今天我们想与大家分享另一套过渡效果。这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的。我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果,而今天这篇文章能够给你一些启示。
温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
因为我们希望能够在一个页面上展现所有的效果,因此我们示例的结果都是非常具体的。但在一般情况下,我们需要在 Push 容器内部或者外部的侧边栏元素,这取决于我们是要把侧边栏显示在 Push 容器的上面还是下面。所以,有两种 HTML 结构,第一种实现的代码如下:
<div id="st-container" class="st-container"> <!-- content push wrapper --> <div class="st-pusher"> <nav class="st-menu st-effect-1" id="menu-1"> <!-- sidebar content --> </nav> <div class="st-content"><!-- this is the wrapper for the content --> <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu --> <!-- the content --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container -->
或者是下面这种结构:
<div id="st-container" class="st-container"> <nav class="st-menu st-effect-1" id="menu-1"> <!-- sidebar content --> </nav> <!-- content push wrapper --> <div class="st-pusher"> <div class="st-content"><!-- this is the wrapper for the content --> <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu --> <!-- the content --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container -->
效果七的 CSS 代码如下。我们把透视值添加到主容器,然后我们以 3D 效果旋转 Push 容器和菜单 :
.st-effect-7.st-container { perspective: 1500px; perspective-origin: 0% 50%; } .st-effect-7 .st-pusher { transform-style: preserve-3d; } .st-effect-7.st-menu-open .st-pusher { transform: translate3d(300px, 0, 0); } .st-effect-7.st-menu { transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform-origin: 100% 50%; transform-style: preserve-3d; } .st-effect-7.st-menu-open .st-effect-7.st-menu { visibility: visible; transform: translate3d(-100%, 0, 0) rotateY(0deg); }
请注意,我们在这里使用 visibility 属性,因为在我们的演示中有多个侧边栏。如果你只是有一个侧边栏,你将不必把 visibility 属性从hidden 设置为 visible。
另外有些浏览器不支持伪元素(我们用来实现遮罩)的过渡(transitions),所以你在这些浏览器可能会看到一个快速闪烁(例如一些手机浏览器)。还有就是,IE10 不支持 transform-style: preserve-3d 效果,会破坏嵌套的 3D 转换元素。所以有部分例子你将不能够正确地看到那些效果。
我们希望这个集合给你一些灵感,创造出一些不错的效果。希望你会喜欢!
本文链接:创意无限!很酷的网页边栏过渡动画 via Codrops
相关推荐
jquery插件库-动感的页面加载动画效果.zip
跟随音乐节奏动起来的加载进度条,加载动画,动感音乐超级酷炫多个开场加载动画ppt特效模板。
HTML一组动感的页面切换效果(含js.jq源代码)
基于jquery+css3实现的13种动感页面加载动画特效源码.zip
今天这篇文章教大家如何使用 Piecon 生成动感的网页图标加载动画,效果如下: Piecon 是著名的代码托管平台 Github 上的开源库,能够动态生成饼图(Pie Charts)模式的网页图标,同时可以显示加载的百分比。它的灵感...
如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行,因此这篇文章想给你带来一些启示。 这个效果的...
wow.js结合animated.css使用,页面添加动画,给网站增加活跃性
一组动感按钮效果。
Android动感十足的loading加载效果
这样的动画图标可以赋予用户等待的过程一定的动感和交互性,让用户有一种正在进行中的感觉,同时也提供了一种视觉上的反馈,使用户知道应用正在努力加载内容。 这个资源还提供了高度的自定义性,您可以根据自己的...
一款动感效果较好的jquery相册代码特效,兼容性良好,看起来有一定的粘粘性,鼠标悬停后底部显示文字说明
光标聚焦到每一输入框或者点击按钮后彩色线条都会「流动」到对应的地方,有很强的指示效果。动感线条使用 svg 实现。
一组动感的网页文字闪烁代码。代码编写后经过了网站使用验证。
页面动感loading特效代码 使用推荐下载
这是一款使用Snap.svg和svg路径变形制作html5页面切换效果。这款html5页面切换效果在页面切换的时候svg线条不断的摇摆,炫酷动感十足。
JS 动感 效果 推荐 系列1JS 动感 效果 推荐 系列1JS 动感 效果 推荐 系列1JS 动感 效果 推荐 系列1JS 动感 效果 推荐 系列1JS 动感 效果 推荐 系列1
动感网页相册5套!酷! 动感相册 非常漂亮
各种炫酷页面切换效果,非常动感,有源代码,可以提供前端开发人员,UI设计人员丰富的创作灵感。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...