特来请教思路 or 仿制demo。

http://ife.baidu.com/，就是这个展开的效果。

有要求的：

在展开的过程中，图片不能有拉伸的效果，一直保持原样，这个文字在展开的过程中也要一直保持原样，不能有视觉上的移动。文字请勿与白底用一样的颜色。


我能仿的最高的程度就是展开时，图片达到要求，但是文字却做不到同样展开的效果，如果做到了，它就会在展开的过程中发生移动，这与要求不一样。

请赐教，thx
--
修改:xiatianup FROM 59.172.187.*
FROM 59.172.187.*

可能是我木有表述清楚，我说的只是第一屏，那个坐地妹纸的区域效果。。。这个不是用swiper做的吧。










【 在 dhcn 的大作中提到: 】
: 不就是个swiper吗?
: :特来请教思路 or 仿制demo。
: :http://ife.baidu.com/，就是这个展开的效果。
: ...................
--
FROM 59.172.75.*

HTML：
<div id="loading" class="loading-end">
        <div class="door-left"></div>
        <div class="door-right"></div>
</div>
CSS：
#loading {
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%
}

#loading:before, #loading:after {
    display: table;
    content: ""
}

#loading:after {
    clear: both
}

.door-left, .door-right {
    background-color: #1bbc9b;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s ease
}

.door-left {
    float: left;
    -webkit-transform-origin: 0 0
}

.door-right {
    float: right;
    -webkit-transform-origin: 100% 0
}

.loading-end {
    visibility: hidden
}

.loading-end .door-left {
    -webkit-transform: rotateY(-90deg)
}

.loading-end .door-right {
    -webkit-transform: rotateY(90deg)
}
--
FROM 218.56.80.*

之前学过。。。










【 在 xxp (华山令狐冲) 的大作中提到: 】
: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
--
FROM 27.17.61.*

这个取决于浏览器吧，即使页面支持这样的手势判断也不靠谱，因为有的人会在浏览器自定义这些手势的功能。。。










【 在 woshidashu (唯爱无尽光) 的大作中提到: 】
: 鼠标手势：向下翻页  无效。除非没有选择，我不会再次打开这种网页
--
FROM 27.17.61.*