Question

我希望在滚动页面时实现一个图像在另一个图像上显示的效果。

你可以在livearealabs.com（纽约/西雅图）上看到一个例子。有人知道如何使用CSS3创建它吗？

Answer 1

查看此 jsfiddle 以创建滑动效果。

诀窍是让一个div旋转60度。您将其定位，使其覆盖整个包装，并隐藏溢出。然后使用javascript，您只需通过更改left属性或更改translate-X属性来移动切片容器。

以下是代码：

HTML：

<div class="wrapper">
    <div class="bg"></div>
    <div class="slice" data-show="true"></div>
</div>

CSS：

.wrapper {
    position: relative;
    overflow: hidden;
    width: 20em;
    height: 10em;
}

.bg {
    background-color: red;
    width: 100%;
    height: 100%;
}

.slice {
    position: absolute;
    top: -12em;
    left: -8em;
    width: 30em;
    height: 30em;
    background-color: blue;
    -webkit-transform: rotate(-60deg);
}

JS：

var hidden = false;
$('.wrapper').click(function() {
    console.log('click');
    if (hidden) {
        $('.slice').stop().animate({left: '-8em'}, 2000);
        hidden = false;
    } else {
        $('.slice').stop().animate({left: '-34em'}, 2000);
        hidden = true;
    }
    console.log('click end');
});

同时查看此 jsfiddle ，了解仅使用CSS即可实现的类似滑动效果。

在滚动时使用css translate-y分割/显示图像

1 个答案: