JQuery网页过渡响应布局放大特效

JQuery网页过渡响应布局放大特效
 点击预览  点击下载

Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

今天我们想与你分享的是实验性的响应式布局。最初,显示四个灵活框盒子布局。当点击一个盒子,它将扩大到全屏,其他会缩小和消失。关闭当前视图时,它会回到初始位置,而其他的盒子回来了。另一种类型的网页过渡上可以看到的部分,我们将作品的滑动面板的底部显示一个组合项目。目前看来会缩小并消失在后面。

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

所有的效果都是通过CSS和JavaScript应用类转换控制。整体布局灵活,一些媒体查询添加到较小的屏幕尺寸下。

转载请注明:代码家园 » JQuery网页过渡响应布局放大特效

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)