滑卡样式 HTML CSS JS

Question

我想用 html/css/js 做一个幻灯片卡片式的网站。

我见过一些不错的例子，例如：

http://www.thepetedesign.com/demos/onepage_scroll_demo.html

http://alvarotrigo.com/fullPage/

但是，这些似乎不会做的是在下面的页面可见时滑出页面，就好像它们是一叠索引卡一样。视差滚动会执行此操作，但它通常会擦除现有区域，而不是 scroll/move 将其从屏幕上擦除。有什么想法吗？

Answer 1

这是一个使用 JQuery 的 fiddle，它的作用类似于您正在寻找的东西，您可以使用卡片滑块的滚动效果来实现它，并可能使其具有动画效果。

http://jsfiddle.net/d6rKn/

(function(window){ $.fn.stopAtTop= function () {
var $this = this,
    $window = $(window),
    thisPos = $this.offset().top,
    setPosition,
    under,
    over;

under = function(){
    if ($window.scrollTop() < thisPos) {
        $this.css({
            position: 'absolute',
            top: ""
        });
        setPosition = over;
    }
};

over = function(){
    if (!($window.scrollTop() < thisPos)){
        $this.css({
            position: 'fixed',
            top: 0
        });
        setPosition = under;
    }
};

setPosition = over;

$window.resize(function()
{
    bumperPos = pos.offset().top;
    thisHeight = $this.outerHeight();
    setPosition();
});

$window.scroll(function(){setPosition();});
setPosition();
};
})(window);

$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();

HTML 和 CSS 参见 fiddle。

不是我的 fiddle 只是通过快速 google 搜索抓住了它。

滑卡样式 HTML CSS JS

Slide Card Style HTML CSS JS

css

slide